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