利用java ajax以及js实现input框的模糊匹配下拉显示

Posted 2020-11-10 大科比的小弟

前台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();//把第二个下拉列表展示
					});
				}