简单的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插件的下载：点击打开链接