简单的js+css的输入框自动提示功能实现

由于原来项目需求做了一个基于百度的suggest的提示功能，直接调用的百度的suggest功能，能够实现与百度搜索一样的提示效果。最近需要在一个简单的输入框中加一个提示功能，大概就是后台把数据传到前台，前台爸需要展示的数据添加到datalist中的option选项中，其他的提示功能由js实现。

页面的输入框与datalist标签

<input type="text"  id="awesomplete"list="mylist"/><datalist id="mylist"></datalist>

加载datalist的页面js脚本：

<!-- 加载datalist列表数据 --><script type="text/javascript">function assignTask(objectId){             $("#mylist").empty(); //清空      $.ajax({    url:"${basePath}monitor/getUserName?objectId="+objectId,          type:"Get",          error:function(){          },           success:function(data){        var objectname=data.name;            var modelList = data.list;              if(modelList!=null && modelList.length != 0){                  for(var i=0; i<modelList.length; i++){                      var option="<option>"+modelList[i].name+"</option>";                      $("#mylist").append(option);                 }              }          }      });      }  </script>

能从后台拿到要显示的数据传到前台的datalist后，把需要的自动提示功能的js插件与css插件导入到页面。

<script src="${ctx}/js/awesomplete.js"></script><link rel="stylesheet" href="${ctx}/css/awesomplete.css" />

这样就能实现简单的自动提示功能了。

js与css插件的下载：点击打开链接