下拉框模糊搜索很好使，但是比较难实现，下面就直接贴代码吧。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>下拉框模糊搜索-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> .second select { width:169px; height:106px; margin:0px; margin-top:60px; outline:none; border:1px solid #999; margin-top:31px; } .second input { width:167px; top:6px; outline:none; border:0pt; position:absolute; line-height:30px; left:8px; height:30px; border:1px solid #999; } .second ul { position:absolute; top:27px; border:1px solid #999; left:8px; width:125px; line-height:16px; } .ul li { list-style:none; width:161px; /* left:15px; */ margin-left:-40px; font-family:微软雅黑; padding-left:4px; } .blue { background:#1e91ff; } </style> </head> <body> <span class="second"> <input type="text" name="makeupCo" id="makeupCo" class="makeinp" onfocus="setfocus(this)" oninput="setinput(this);" placeholder="请选择或输入"> <select name="makeupCoSe" id="typenum" onchange="changeF(this)" size="12" style="display:none;"> <option value="">不隶属于任何分类(详情页)</option> <option value="">华军首页</option> <option value="">华军M站</option> <option value="">游戏下载-华军</option> <option value="">热门资讯-华军</option> <option value="">下载攻略-华军</option> <option value="">下载攻略-pcsoft</option> <option value="">热门资讯-pcsoft</option> <option value="">办公软件-188soft</option> <option value="">pcsoft首页</option> </select> </span> <script> var TempArr = []; //存储option $(function() { /*先将数据存入数组*/ $("#typenum option").each(function(index, el) { TempArr[index] = $(this).text(); }); $(document).bind('click', function(e) { var e = e || window.event; //浏览器兼容性 var elem = e.target || e.srcElement; while (elem) { //循环判断至跟节点，防止点击的是div子元素 if (elem.id && (elem.id == 'typenum' || elem.id == "makeupCo")) { return; } elem = elem.parentNode; } $('#typenum').css('display', 'none'); //点击的不是div或其子元素 }); }) function changeF(this_) { $(this_).prev("input").val($(this_).find("option:selected").text()); $("#typenum").css({ "display": "none" }); } function setfocus(this_) { $("#typenum").css({ "display": "" }); var select = $("#typenum"); for (i = 0; i < TempArr.length; i++) { var option = $("<option></option>").text(TempArr[i]); select.append(option); } } function setinput(this_) { var select = $("#typenum"); select.html(""); for (i = 0; i < TempArr.length; i++) { //若找到以txt的内容开头的，添option if (TempArr[i].substring(0, this_.value.length).indexOf(this_.value) == 0) { var option = $("<option></option>").text(TempArr[i]); select.append(option); } } } </script> </body> </html>
