输入框提示

输入框提示

手动实现 类似百度的热词提示，支持回车，上下键选择，单击选择

var selectedIndex = -1;

 

//绑定事件
$(function(){
        //获取匹配热词   
        var timeout = null;
        $("#name").blur(function(){
            $("#hotWordView").html("").hide();
        }).keydown(function(event){
            var event = event || window.event;
            var keyCode = event.keyCode;
            if(keyCode == 40 || keyCode == 38){
                var isUp = false;
                if(keyCode == 40){
                    isUp = true;   
                }
                changeSelection(isUp);
            }else if(keyCode == 13){
                if(selectedIndex == -1){
                    $("#hotWordView").html("").hide();
                    clickButton();
                }else{
                    var txt = $("#hotWordView").find("div[class='hotwordclass']").find("div:first").html();
                    $("#name").val(txt);
                    $("#hotWordView").html("").hide();                   
                    clickButton();
                    selectedIndex = -1;
                }
            }else{
                selectedIndex = -1;
                clearTimeout(timeout);
                timeout = setTimeout(function(){   
                        if($("#name").val().length > 0){
                            getHotWord();
                        }else{
                            $("#hotWordView").html("").hide();
                        }
                },200);
            }
        });   
        $("#moreSearchCondition").keydown(function(event)
        {
            var event = event || window.event;
            var keyCode = event.keyCode;
            if(keyCode == 13)
            {
                moreSearchClickButton();
            }
        });   
      });

     //上下键选择的function
      function changeSelection(isUp){
          if(isUp){
              selectedIndex++;
          }else{
              selectedIndex--;
          }
          var maxIndex = $("#hotWordView").children().length -1;
          if(selectedIndex < 0){
              selectedIndex = maxIndex;
          }
          if(selectedIndex > maxIndex){
              selectedIndex = 0;
          }
          for(var i = 0; i <= maxIndex; i++){
              if(i == selectedIndex){
                  $("#hotWordView").children()[i].className = "hotwordclass";
              }else{
                  $("#hotWordView").children()[i].className = "";
              }
          }
      }

      //从后台获取相关的词，并进行页面的展示
      function getHotWord()
      {
        $.ajax({
            type:'post',
            url:'getWord.do',
            data:{'name':$("#name").val()},
            dataType:'json',
            success:function(data)
            {   
                if(!data || data.length<1)
                {
                    $("#hotWordView").html("").hide();
                }
                else
                {
                    var position = $("#name").position();
                    $("#hotWordView").html("").css({left: position.left , top: position.top
                        + $("#name").outerHeight()}).width($("#name").width() - 2).show();
                    var i = 0;

                   //为每一个绑定事件
                    $.each(data,function(key,values){
                        i++;
                        var funList = (function(_i){       
                            return [
                                function()
                                {
                                    $("#hotWordView").children().removeClass("hotwordclass");
                                    $("#divhot" + _i).addClass("hotwordclass");
                                    selectedIndex = _i;
                                },
                                function()
                                {
                                    if(selectedIndex == -1){
                                        $("#hotWordView").html("").hide();
                                        clickButton();
                                    }else{
                                        var txt = $("#divhot" + (selectedIndex)).find("div:first").html()
                                        $("#name").val(txt);
                                        $("#hotWordView").html("").hide();                   
                                        clickButton();
                                        selectedIndex = -1;
                                    }
                                },
                                function(){
                                    var txt = $("#divhot" + (selectedIndex)).find("div:first").text();
                                    $("#name").val(txt);
                                    selectedIndex = -1;
                                    clickButton();
                                }
                            ];           
                        })(i);
                       
                        var list = [
                            "<div id='divhot" + i + "' style='float:left;width:100%;clear:both;'>",
                                "<div style='float:left;margin-left:5px;'>"+ key +"</div>",
                                "<div style='float:right;margin-right:5px;'>"+ values +"</div>",
                            "</div>"
                        ].join("");
                        $("#hotWordView").append(list);
                        $("#divhot" + i).mouseover(funList[0]).keydown(funList[1]).mousedown(funList[2]);    
                     });
              }
            },
            error : function(e) {
                $("#hotWordView").html("").hide();
            }   
        });
      }