原生JQquery不使用插件实现input框同时支持输入和下拉选择（模糊搜索）

L_WalkingPig

于 2019-08-12 16:57:07 发布

阅读量849

点赞数

分类专栏： JQuery 文章标签： JQuery

本文链接：https://blog.csdn.net/l_walkingpig/article/details/99309804

版权

本文介绍如何在不使用插件的情况下，利用HTML5的`list`属性结合JQuery实现input输入框支持输入和下拉选择功能，通过动态操作`datalist`元素并监听input的change事件，达到模糊搜索的效果。

摘要由CSDN通过智能技术生成

<input></input> 在HTML5时候增加表单属性：" list "，即list属性后是自定义的数据列表，html代码如下：

<td>
   <input class="market-classifiction" name='materialCodeAdd' placeholder="请输入物料代码或中文名.." type="text" list="dataListItem" style="width: 220px;" id="materialCode" change="searchMaterialCode"/>
	<datalist id="dataListItem">
		<!--<option></option>-->
	</datalist>
</td>

js中即操作dataList标签，id为 dataListItem

$.ajax({
      type: "POST",
      url:"api/xx/xxx/xxxxxx?condition="+condition,
      dataType: "json",
      contentType:"application/json",
      // data:JSON.stringify(data),
      success: function (data) {
                        var dataBase = data.entity;