在Web开发中我们经常需要用户进行输入操作，输入框内我们输入几个字，输入框就会出现下拉提示你可能要输入的完整信息。下面我总结了几种常见的方案：
一：EasyUi combobox 组合框
具体使用方法官方文档上有详细介绍：。
当然，你若觉得样式不怎么好看，引入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，不支持。也有说不支持，作者亲自使用过可以支持（暂未发现不支持的安卓机型）。如果是移动端开发的话，不建议采用这种方式。
四：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="" οninput="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' οnclick='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' οnclick='itemClick(this)'> " + newArray[i] + "</li>";
}
} else {
for (var i = 0; i < global_qymc.length; i++) {
html += "<li style='width:100%;' class='liitem' οnclick='itemClick(this)'> " + global_qymc[i] + "</li>";
}
}
}
c_div.innerHTML = "<ul>" + html + "</ui>";
$("body").append(c_div);
}
https://download.csdn.net/download/fastpat/10526657
如有问题，欢迎批评指正！如你有更好的方案，欢迎大家互相交流学习！