js+ajax 实现搜索下拉列表

input + dataList +ajax 实现搜索下拉列表。原来一直都是select一动态加载很麻烦，还不可以搜索，自己写下拉搜索的话还要调css样式觉得很麻烦。调整样式什么。查阅了下H5的API发现了一个dataList标签，标签定义选项列表，跟 input 元素配合使用该元素，来定义 input 可能的值。唯一不足的就是兼容问题，不可以兼容到低版本ie。

 

文本框定义如下：加入list=“”；这个list名字要与dataList的id保持一致。这样就可关联。

 

<input type="text" id="a" list="browsers">
<datalist id="browsers">
  <option bh="1" value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

 

文本框做实施监听，监听时发送ajax请求，更换dataList中value：

 

 

$("#a").bind('input propertychange', function() {
	$.ajax( {
		url : ctxpath + "/admin/mer/timing/query",
		type : 'post',
		data : {},
		dataType : 'json',
		success : function(data) {
  
		},
		error : function() {
			alert('程序错误，请联系管理员'); 
		}
	});
}）