js实现输入提示功能，类似于百度输入功能

当我们在百度input框数据如内容时，会在下方有四个提示内容。并且随着你输入一直变化。今天来实现这个功能。提示的内容从后台获取。

首先定义一个input框，在input上绑定list 属性。如下图

 js:

<script type="text/javascript">
	var flag = true;
	
	$('#userName').on('compositionstart',function(){
        flag = false;
    })
    $('#userName').on('compositionend',function(){
        flag = true;
    })
	
	$("#userName").on('input',function(){
		setTimeout(function(){
            if(flag){
                var userName = $("#userName").val();
                if(null != userName && "" != userName){
					var getUser = {
						url:ss.urlMapping['GETUSERNAMELIKE'],
						async:false,
						param:{"name":userName},
						callback:function(data){
							var code = data.returnCode;
							if(code == '1'){
								if(data.data.length != 0){
									$("#reminder").empty();
									for(var i=0;i<data.data.length;i++){
										 var option="<option>"+ data.data[i] +"</option>";  
										 $("#reminder").append(option);
									}
								}
							}
						},
					    errCallback: function () {
					    	$.Huimodalalert('获 取 名  称  失 败',2000);
						}
					}
					ss.post(getUser);
				}
            }
        },0)
	});
	
</script>

引擎模板(这里使用的是doT.js)：

<script type="text/template" id="list-tpl1">
{{~ it : value : index}}
    {{~ value : val : ind}}
	<option value="{{=val.id}}">{{=val.dutyName}}</option>
	{{~}}
{{~}}
</script>