写个简单的自动补全，供学习的朋友参考，希望对大家所有帮助
需要先引入jquery，注意自己的引入路径
<script type="text/javascript" src="js/jquery.min.js"></script> <input id="chooseCity" type="text" placeholder="输入城市查询">页面初始化时调用下下面方法即可，传两个参数，一个元素id跟数据
$(function(){ var data = ['七里香','站长素材','HTML5特效','wshlfx.com',47,'你在哪','去哪啊'];//所有数据 searchCityLoad("chooseCity",data);//调用初始化方法 chooseCity是input元素id, data是数据, });这里是初始化元素的方法，用时只需要调用改方法即可， 参数一 eleId 表示元素id 参数二 arr表示数据
这里的值只有一个，有些需要几个值的，比如显示值跟选择值等，不同需求的话也可根据修改
//========初始化开始======== function searchCityLoad(eleId,arr){ //如果需要动态改变的话, //每次执行前可以先移除事件 //$("#"+eleId).unbind(); //绑定事件 $("#"+eleId).bind('input propertychange',function(){ $("#"+eleId).after('<div style="position:absolute;z-index:9;overflow:hidden;border: 1px solid #cccccc;border-bottom:0;border-top:0;" ></div>'); $("#"+eleId).next('div').width($("#"+eleId).outerWidth()-2);//设置元素宽度 $("#"+eleId).next('div').css({"margin-left":$("#"+eleId).css("margin-left")});//设置元素边距 var arrNew = []; var i; for(i=0;i<arr.length;i++){ var arrItems=arr[i]; //判断元素是否存在于arrNew中， //如果不存在则插入到arrNew的最后 if($.inArray(arrItems,arrNew)==-1) { arrNew.push(arrItems); } } //这是将input中输入的数据有关联的全部加入新生成的div中显示出来 for(i=0;i<arrNew.length;i++){ var arrWord = arrNew[i].toString(); if(((arrWord.indexOf($("#"+eleId).val())) > -1) && ($("#"+eleId).val().length > 0)){ var addArrWord = '<div class="auto-screening-zms" style="cursor:pointer;width:100%;height:30px;line-height:30px;border-bottom:1px solid #cccccc;background:#ffffff;padding: 0 10px;">' + arrWord + "</div>"; $("#"+eleId).next('div').append(addArrWord); } } /*将显示出来的div的内容去重复，input内容变动时去重复*/ $(".auto-screening-zms").each(function(){ if($(this).text().indexOf($("#"+eleId).val()) < 0){ $(this).remove(); }else if($("#"+eleId).val().length == 0){ $("#"+eleId).next('div').addClass("auto-hidden"); $(".auto-screening-zms").remove(); } }); /*弹出的提示div去重复*/ $(".auto-screening-zms").each(function(i, iText){ var iTextHtml = iText.innerHTML; $(".auto-screening-zms").each(function(j, jText){ var jTextHtml = jText.innerHTML; if (i < j && iTextHtml == jTextHtml) { $(this).remove(); } }); }); //元素悬停事件,设置悬停样式 $(".auto-screening-zms").hover(function(){ $(this).css("background","#cccccc"); },function(){ $(this).css("background","#ffffff"); }); /*点击下拉元素传值*/ $(".auto-screening-zms").on("click",function(){ $("#"+eleId).val($(this).text()); $(".auto-screening-zms").remove(); }) }) } //========初始化结束======== 相关资源：jquery实现自动补全