关于搜索框的自动完成功能

 

<script type="text/javascript">
$(function(){
     $search = $('#searchTxt')  //取得div层 
    ,$searchInput = $search.find('#indexKey')     //取得输入框JQuery对象 
    //创建自动完成的下拉列表，用于显示服务器返回的数据,插入在搜索按钮的后面，等显示的时候再调整位置 
    var $autocomplete = $('<div ></div>') 
    .hide() 
    //清空下拉列表的内容并且隐藏下拉列表区 
    var clear = function(){ 
        $autocomplete.empty().hide(); 
    }; 
    //注册事件，当输入框失去焦点的时候清空下拉列表并隐藏 
    $searchInput.blur(function(){ 
        setTimeout(clear,500); 
    }); 
    //下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的上下键就会移动高亮的项目，想百度搜索那样 
    var selectedItem = -1; 
    //timeout的ID 
    var timeoutid = null; 
    //设置下拉项的高亮背景 
    var setSelectedItem = function(item){ 
        //更新索引变量 
        selectedItem = item ; 
        //按上下键是循环显示的，小于0就置成最大的值，大于最大值就置成0 
        if(selectedItem < 0){ 
            selectedItem = $("#homeKeywordAuto").find("div").length - 1; 
        } 
        else if(selectedItem > $("#homeKeywordAuto").find("div").length-1 ) { 
            selectedItem = 0; 
        } 
        //首先移除其他列表项的高亮背景，然后再高亮当前索引的背景 
        $("#homeKeywordAuto").find("div").removeClass('highlight') 
        .eq(selectedItem).addClass('highlight'); 
    }; 
    var ajax_request = function(){ 
    //ajax服务端通信 
    $.ajax({ 
        'url':'/KeyWord/SearchKeyWord.shtml?word='+encodeURI($searchInput.val(),"UTF-8"), //服务器的地址 
        'data':{'search-text':encodeURI($searchInput.val(),"UTF-8")}, //参数  
        'dataType':'json', //返回数据类型 
        'type':'POST', //请求类型 
        'success':function(data){ 
        //遍历data，添加到自动完成区 
        var adState = eval(data);
        if(adState!=null && adState.count>0){
            adState.keywords.length= adState.count>5 ? 5 : adState.count
            for(var i=0;i<adState.keywords.length;i++){
                for(var i=0;i<adState.keywords.length;i++){
                    var item = $('<div class="row"><a>'+adState.keywords[i]+'</a></div>')
                        item.click(function(){
                            $searchInput.val($(this).find("a").html())
                            $("#homeKeywordAuto").hide();
                        })
                        item.on("mouseover mouseout", function(e) {
                                if (e.type === "mouseover") {
                                    $(this).addClass("highlight");
                                } else {
                                    $(this).removeClass("highlight");
                                }
                            })
                            $autocomplete.append(item);                
                }                
            }
            $("#homeKeywordAuto").empty().append($autocomplete.find("div")).show()
          }
    } 
    }); 
    }; 
    //对输入框进行事件注册 
    $searchInput 
    .keyup(function(event) { 
        //字母数字，退格，空格 
        if(event.keyCode > 40 || event.keyCode == 8 || event.keyCode ==32) { 
        //首先删除下拉列表中的信息 
            selectedItem = -1;
            $("#homeKeywordAuto").empty().hide(); 
            clearTimeout(timeoutid); 
            timeoutid = setTimeout(ajax_request,100); 
        } 
        else if(event.keyCode == 38){ 
        //上 
        //selectedItem = -1 代表鼠标离开 
        if(selectedItem == -1)
            setSelectedItem($("#homeKeywordAuto").find('div').length-1); 
        else 
        //索引减1 
            setSelectedItem(selectedItem - 1); 
            event.preventDefault(); 
        } 
        else if(event.keyCode == 40) { 
        //下 
        //selectedItem = -1 代表鼠标离开 
        if(selectedItem == -1) 
            setSelectedItem(0); 
        else  
        //索引加1 
            setSelectedItem(selectedItem + 1);  
            event.preventDefault(); 
        } 
    }) 
    .keypress(function(event){ 
        //enter键 
        if(event.keyCode == 13) { 
            //列表为空或者鼠标离开导致当前没有索引值 
            if($("#homeKeywordAuto").find('div').length == 0 || selectedItem == -1) return; 
                $searchInput.val($("#homeKeywordAuto").find('div').eq(selectedItem).text()); 
                $("#homeKeywordAuto").empty().hide(); 
        } 
    }) 
    $(document).click(function(){
        $("#homeKeywordAuto").hide()
    })
    
    $(document).keypress(function(event){
        if(event.keyCode == 13) { 
            if($searchInput.val().length>0)
              $("form[name='searchForm']").submit();
            } 
    })
})    
</script>

<style>
#homeKeywordAuto{position:absolute;background:#fff;z-index:5;width:100%;border-left:1px solid #EAEAEA;border-right:1px solid #EAEAEA;border-bottom:1px solid #EAEAEA;border-top:0px ;margin-top:20px;}
#homeKeywordAuto .row {padding-left:10px;display: block;}
#homeKeywordAuto .row a{display:block;font-size:14px;height:32px;line-height:32px;color:#555;}
.highlight { 
background-color:#DCDCDC; 
} 
</style>