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

前台jsp：

value="${bigCategoryName}" style="width:150px" maxlength="20" list="second"

οninput="firstSel()"/>

注意：AutoComplete="off"的作用是屏蔽掉浏览器本身的模糊匹配以前的输入记录，原来默认是on。

οninput=""要用oninput事件监测输入框实时输入数据。

中的id与input标签中的list=“”绑定，用于显示ajax从后台获取的数据。

标签主要是为了将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 += ""+n.smallCategoryName+""

});

$("#second").html(option);//将循环拼接的字符串插入第二个下拉列表

$("#second").show();//把第二个下拉列表展示

});

}