autocomplete实现原理

autocomplete实现原理
主要用在input 和 textarea这两个标签上，为这标签增加键盘监听事件和提示列表添加鼠标事件。

例如：input的id为txt

为input增加键盘监听事件（keyup）

    var mindex = -1;

    $("#txt").keyup(function(e){

        e = e || window.event;

        

        if(e.keyCode !== 27 && e.keyCode !== 38 && e.keyCode !== 40){

            _mtxt = $(this).val();

            fqaInit(_mtxt,_faqData);  //创建列表

        }

                    

        if(e.keyCode === 27){  //esc键 退出

            $("#mlist").remove();

            $(this).val(_mtxt);

        }

                    

        if(e.keyCode === 38){  //上键

            if(mindex>-1){

                mindex--;

            }

            if(mindex===-1){

                mindex = $("#mlist li").length-1;

            }

                        

            $("#mlist li").attr("class","").eq(mindex).attr("class","on");

            var choosetxt = $("#mlist li").eq(mindex).text();

            $("#txt").val(choosetxt);

        }

                    

        if(e.keyCode === 40){  //下键

            mindex++;

            if(mindex===$("#mlist li").length){

                mindex = 0;

            }

            $("#mlist li").attr("class","").eq(mindex).attr("class","on");

            var choosetxt = $("#mlist li").eq(mindex).text();

            $("#txt").val(choosetxt);

        }

    });

为列表增加鼠标事件（mouseover）

    $("#mlist li").live("mouseover",function(){

        mindex = $(this).index();

        $("#mlist li").attr("class","").eq(mindex).attr("class","on");

        var choosetxt = $("#mlist li").eq(mindex).text();

        $("#txt").val(choosetxt);

    });

创建列表

    function fqaInit(words,arr){

        $("#mlist").remove(); //移除列表

        if($.trim(words)!==""){  //当内容部位空时

            var count = 0;  //记录列表个数

            var html = "";

            html += "<ul id='mlist'>";

            for(var i=0,j=arr.length;i<j;i++){

                if((arr[i].title.toLocaleLowerCase().indexOf(words.toLocaleLowerCase()))!=-1){

                    count++;

                    html+="<li>"+arr[i].title.replace(words,"<span style='color:#FF6666;'>"+words+"</span>")+"</li>";

                    if(count>10){  //限制最大显示10个

                        break;

                    }

                }

            }

            html+="</ul>";

            if(count>0){  //存在时插入body中

                $("body").append(html);

            }

        }

    }