基于jquery的自动补全

写个简单的自动补全，供学习的朋友参考，希望对大家所有帮助
代码下载

---

需要先引入jquery，注意自己的引入路径

<script type="text/javascript" src="js/jquery.min.js"></script>

<input  id="chooseCity" type="text" placeholder="输入哪或w查询演示">

页面初始化时调用下下面方法即可，传两个参数，一个元素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();
            })              
        })
    }
    //========初始化结束========

演示效果如下：