利用java ajax以及js實現input框的模糊匹配下拉顯示

前台jsp：

<input type="text" name="bigCategoryName" id="bigCategoryName" AutoComplete="off"
        	value="${bigCategoryName}" style="width:150px" maxlength="20" list="second"
        	oninput="firstSel()"/>

         <div style="display: none;">
         <datalist id="second" ></datalist></div>

　　注意：AutoComplete="off"的作用是屏蔽掉瀏覽器本身的模糊匹配以前的輸入記錄，原來默認是on。

　　　　　oninput=""要用oninput事件監測輸入框實時輸入數據。

 　　　　<datalist>中的id與input標簽中的list=“”綁定，用於顯示ajax從后台獲取的數據。

　　　　<div>標簽主要是為了將datelist包裹並設置 style="display: none"隱藏屬性。

js代碼：

function firstSel() {//如果第一個下拉列表的值改變則調用此方法
				var orderTypeName = $("#first").val();//得到第一個下拉列表的值
				 var url = "/XXX/xxx.do";
				if(orderTypeName!=null && "" != orderTypeName&& -1 != orderTypeName){
					//通過ajax傳入后台，把orderTypeName數據傳到后端
					$.post(url,{orderTypeName:orderTypeName},
					function(data){
					var res = JSON.parse(data);
					/* var res = $.parseJSON(data); *///把后台傳回的json數據解析
					var option;
					$.each(res,function(i,n){//循環，i為下標從0開始，n為集合中對應的第i個對象
					option += "<option value='"+n.smallCategoryName+"'>"+n.smallCategoryName+"</option>"
					});
					$("#second").html(option);//將循環拼接的字符串插入第二個下拉列表
					$("#second").show();//把第二個下拉列表展示
					});
				}