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);
            }
        }
    }