帶輸入查詢功能匹配下拉框的幾種實現方式
在Web開發中我們經常需要用戶進行輸入操作，輸入框內我們輸入幾個字，輸入框就會出現下拉提示你可能要輸入的完整信息。下面我總結了幾種常見的方案：
一：EasyUi combobox 組合框
具體使用方法官方文檔上有詳細介紹：http://www.jeasyui.net/plugins/169.html。
當然，你若覺得樣式不怎麽好看，引入easyui的 js 和css,可以進行簡單的樣式調整如下：
.textbox {
webkit-border-radius: 0px;
border-radius: 0px;
border: 1px solid #DDD;
margin-left: 20px;
margin-top: 5px;
width: 377px !important;
.....
}
二：select與input文本框的結合
將text文本框覆蓋到select下拉框上, 通過onchange()給文本框賦值，這也是網上比較常見的一種方式。
三：使用html5 的dataList
<input type="text" id="textSelect" list="dataListForSelect" />
<datalist id="dataListForSelect">
<option value="Monday" />
<option value="Tuesday" />
<option value="Wednesday" />
<option value="Thursday" />
<option value="Friday" />
<option value="Saturday " />
<option value="Sunday" />
<option value="Year" />
<option value="Month" />
<option value="Day" />
</datalist>
這是一種比較簡潔的寫法，支持Firefox、Chrome、Opera和部分IE，不支持ios。也有說不支持Android，作者親自使用過可以支持Android（暫未發現不支持的安卓機型）。如果是移動端開發的話，不建議采用這種方式。
四：div ul li 與 input布局 ,模擬可輸入下拉框
Js動態創建div,使用定位將其定位到input下，用li模擬select的option，其樣式可以自己隨便定義。具體實現效果圖如下：
實現代碼：
Css: ul {
margin-top: 0px;
padding-left: 0px;
}
li {
padding: 0px;
list-style: none;
height: 35px;
line-height: 35px;
display: block;
border-bottom: 1px solid #DDD;
}
li:hover {
background-color: #DDD;
}
Html： <input type="text" id="txtExma" style="width: 200px; margin: 0 auto;" name="name" value="" oninput="my_div(this)" /> 建議使用oninput. 測試發現部分手機不支持onkeyup事件
Js:
var global_qymc = new Array();
for (var i = 0; i < 20; i++) {
global_qymc.push("ddsds" + i);//模擬數據源
}
var objinput;
function itemClick(o) {
var data = $.trim($(o).text());
$(objinput).val(data);
$(".createDIv").each(function () {
$(this).hide();
});
}
function my_div(o) {
objinput = o;
var absoluteP = o.getBoundingClientRect();
var o_l = absoluteP.left, o_t = absoluteP.top, o_w = $(o).width();
var t_value = $(o).val().trim();
var c_div = document.createElement("div");
c_div.style.cssText = "position:absolute;width:" + (o_w + 4) + "px;height:60%;top:" + (o_t + 22) + "px;left:" + o_l + "px;border:0px solid #ccc;overflow-y:auto;overflow-x:hidden;background-color:white;";
c_div.className = "createDIv";
var html = "";
var newArray = new Array();
for (var i = 0; i < global_qymc.length; i++) {
var arr_vla = new Array();
var k = 0;
while (k < t_value.length) {
var s = "";
while (t_value.charCodeAt(k) < 256) {
s = s + t_value.charAt(k);
k++;
break;
}
if (s != "") {
arr_vla.push(s);
}
var s = "";
while (t_value.charCodeAt(k) > 256) {
s = s + t_value.charAt(k);
k++;
break;
}
if (s != "") {
arr_vla.push(s);
}
}
var isTure = false;
for (var s = 0; s < arr_vla.length; s++) {
if (global_qymc[i].indexOf(arr_vla[s]) != -1) {
isTure = true;
} else {
isTure = false;
break;
}
}
if (isTure) {
newArray.push(global_qymc[i]);
}
}
if (newArray == null) {
for (var i = 0; i < global_qymc.length; i++) {
html += "<li style=‘width:100%;‘ class=‘liitem‘ onclick=‘itemClick(this)‘> " + global_qymc[i] + "</li>";
}
} else {
if (newArray.length != 0) {
for (var i = 0; i < newArray.length; i++) {
html += "<li style=‘width:100%;‘ class=‘liitem‘ onclick=‘itemClick(this)‘> " + newArray[i] + "</li>";
}
} else {
for (var i = 0; i < global_qymc.length; i++) {
html += "<li style=‘width:100%;‘ class=‘liitem‘ onclick=‘itemClick(this)‘> " + global_qymc[i] + "</li>";
}
}
}
c_div.innerHTML = "<ul>" + html + "</ui>";
$("body").append(c_div);
}
https://download.csdn.net/download/fastpat/10526657
如有問題，歡迎批評指正！如你有更好的方案，歡迎大家互相交流學習！
帶輸入查詢功能匹配下拉框的幾種實現方式