输入过滤筛选下拉信息(类似百度输入)

引入  jquery 

css

<style type="text/css">
 .search{  
           left: 0;  
           display: inline;
           position: relative;  
       }  
       #auto_div{  
           display: none;  
           width: 196px;  
           border: 1px #74c0f9 solid;  
           background: #FFF;  
           position: absolute;  
           top: 25px;  
           left: 0;  
           color: #323232;  
           z-index:10;
           overflow-y:scroll;
           height:190px;
       }  
</style>

script
					<script type="text/javascript">
				    //
			        var test_list = [];  
				     $.ajax({
		                url: '后台访问',
		                type: "post",
		                //dataType: "json",
		                success: function (source) {
		                	test_list = source;//直接返回list集合即可,本例 test_list.rows( rows 对象)

		                }
		            });
				      
			        var old_value = "";  
			        var highlightindex = -1;   //高亮  
			        //自动完成  
			        function AutoComplete(auto, search, mylist) {  
			            if ($("#" + search).val() != old_value || old_value == "") {  
			                var autoNode = $("#" + auto);   //缓存对象（弹出框）  
			                var carlist = new Array();  
			                var n = 0;  
			                old_value = $("#" + search).val();  
			                for (i in mylist) {  
			                    if (mylist[i].name.indexOf(old_value) >= 0) {  
			                        carlist[n++] = mylist[i].name;  
			                    }  
			                }  
			                if (carlist.length == 0) {  
			                    autoNode.hide();  
			                    return;  
			                }  
			                autoNode.empty();  //清空上次的记录  
			                for (i in carlist) {  
			                    var wordNode = carlist[i];   //弹出框里的每一条内容  
			                    var newDivNode = $("<div>").attr("id", i);    //设置每个节点的id值  
			                    newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");  
			                    newDivNode.html(wordNode).appendTo(autoNode);  //追加到弹出框  
			                    //鼠标移入高亮，移开不高亮  
			                    newDivNode.mouseover(function () {  
			                        if (highlightindex != -1) {        //原来高亮的节点要取消高亮（是-1就不需要了）  
			                            autoNode.children("div").eq(highlightindex).css("background-color", "white");  
			                        }  
			                        //记录新的高亮节点索引  
			                        highlightindex = $(this).attr("id");  
			                        $(this).css("background-color", "#ebebeb");  
			                    });  
			                    newDivNode.mouseout(function () {  
			                        $(this).css("background-color", "white");  
			                    });  
			                    //鼠标点击文字上屏  
			                    newDivNode.click(function () {  
			                        //取出高亮节点的文本内容  
			                        var comText = autoNode.hide().children("div").eq(highlightindex).text();  
			                        highlightindex = -1;  
			                        //文本框中的内容变成高亮节点的内容  
			                        $("#" + search).val(comText);  
			                    })  
			                    if (carlist.length > 0) {    //如果返回值有内容就显示出来  
			                        autoNode.show();  
			                    } else {               //服务器端无内容返回 那么隐藏弹出框  
			                        autoNode.hide();  
			                        //弹出框隐藏的同时，高亮节点索引值也变成-1  
			                        highlightindex = -1;  
			                    }  
			                }  
			            }  
			            //点击页面隐藏自动补全提示框  
			            document.onclick = function (e) {  
			                var e = e ? e : window.event;  
			                var tar = e.srcElement || e.target;  
			                if (tar.id != search) {  
			                    if ($("#" + auto).is(":visible")) {  
			                        $("#" + auto).css("display", "none")  
			                    }  
			                }  
			            }  
			        }  
			        $(function () {  
			            old_value = $("#gdsNameId").val();  
			            $("#gdsNameId").focus(function () {  
			                if ($("#gdsNameId").val() == "") {  
			                    AutoComplete("auto_div", "gdsNameId", test_list.rows);  
			                }  
			            });  
			            $("#gdsNameId").keyup(function () {  
			                AutoComplete("auto_div", "gdsNameId", test_list.rows);  
			            });  
			        });  
					
	</script>

html

<div class="search">  
	<input id="gdsNameId" type="text" autocomplete="off" name="gdsName" value="${gdsName}"  class="form-control"/>
	<div id="auto_div"></div>  
</div>