Jquery 仿百度搜索引擎自动完成功能

浏览数：43 / 时间：2015年06月09日

源代码如下所示：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自动完成例子</title>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<style>
#search label {
display: block;
}

#search-text {
width: 150px;
}

.placeholder {
color: #999;
}

/*#sidebar .autocomplete {*/
.autocomplete {
   margin:0px;
   position: absolute;
   background: #fff;
   border: 1px solid #888;
   width:110px;
   list-style-type: none;
   z-index: 52;
}

/*#sidebar .autocomplete li {*/
.autocomplete li {
    padding:2px;
    margin:0;
    margin-left:-40px;
   }

/*#sidebar .autocomplete li.selected {*/
.autocomplete li.selected {
     background: #008;
     color: #fff;
}

</style>
</head>

    if (selectedItem < 0) { //向上移出界
     $autoComplete.find("li").removeClass("selected");
     $("#search_text").val($("#Result_text").val());
     selectedItem = null;
     return false;
    }

    if (selectedItem >= $autoComplete.find("li").length) { //向下移出界
     $autoComplete.find("li").removeClass("selected");
     $("#search_text").val($("#Result_text").val());
     selectedItem = null;
     return false;
    }

    //移动上下键获取文本值
    $("#search_text").val($autoComplete.find("li").removeClass("selected").eq(selectedItem).addClass("selected").text());
    $autoComplete.show();
   };

   //按回车键获取值，但不能获取==>这里改为直接提交
   var populateSearchField = function () {
    $("#search_text").val($autoComplete.find("li").eq(selectedItem).text());

    //移除ul
    $(‘ul[class="autocomplete"]‘).empty().hide();
   };

   var searchLabel = $("#search_title").remove().text();
   $("#form1").submit(function () {
    if ($("#search_text").val() == searchLabel) {
     $("#search_text").val(‘‘);
    }
   });

   $("#search_text").addClass("placeholder")
        .val(searchLabel)
        .focus(function () {
         if (this.value == searchLabel) {
          $(this).removeClass("placeholder").val(‘‘);
         }
        })
       .blur(function () {
        if (this.value == "") {
         $(this).addClass("placeholder").val(searchLabel);
        }
       })
       .attr("autocomplete", "off")                  //关闭search_text文本框（即浏览器）自带的自动完成功能
       .keydown(function () {
        old_searchtext = $(this).val();           //按下时获取文本值
       })
       .keyup(function (event) {
        var InComeDescription = $(this).val();    //按键释放时触发
        //没有值直接返回,提高性能
        if (InComeDescription == null || InComeDescription.length <= 0) {
         return false;
        }

        //代码为40及以下的为特殊键（回车、方向、退出键等），为8backspace键,32空格键,13 回车
        if (event.keyCode > 40 || event.keyCode == 8 || event.keyCode == 32) {
         selectedItem = null; //每次输入新的数据时清空，以使下拉列表显示正常
         //有数据(可加个判断InComeDescritption不为空才取值)
         $searchtextvalue=$(‘#Result_text‘).val(InComeDescription);

         if (jsonData.length) {
          //var objData = jQuery.parseJSON(jsonData);
          var objData=jsonData;
          //先把以前的记录清空，不然下拉列表会重复
          $(‘ul[class="autocomplete"]‘).empty();
          $.each(objData, function (index, term) {
            if(term.indexOf(InComeDescription)>-1){
           $(‘<li></li>‘).text(term)
             .appendTo($autoComplete)
             .mouseover(function () {
              setSelectedItem(index, null);
             })
             .click(function () {//实现选择值到文本框
              $("#search_text").val(term);
              $(‘ul[class="autocomplete"]‘).hide();
             });
         }
          });

          $autoComplete.show();//按百度默认不选择第一行
          // setSelectedItem(0);//默认选中第一行,不然这时不显示
         } else {
          //没有数据就不显示
          setSelectedItem(null, null);
         }
        } else if (event.keyCode == 38) {
         //用户按了上方向键
         if (selectedItem == null) { return false; } //不选
         setSelectedItem(selectedItem - 1, 38);

        } else if (event.keyCode == 40) {
         //用户按了向下方向键
         if (selectedItem == null) { selectedItem = -1; } //选择第一行
         setSelectedItem(selectedItem + 1, 40);
        }
       })
       .keypress(function (event) {
        if (event.keyCode == 13 && selectedItem != null) {
         populateSearchField();
         event.preventDefault();
        }
       })
       //失去焦点关闭下拉列表,因为blur先于click事件调用，所以这时在延迟以使当click事件执行时能执行
       .blur(function (event) {
        setTimeout(function () {
         setSelectedItem(null)
        }, 250);
       });

});
</script>

<body>
Jquery仿百度自动搜索:提供搜索的数据（张三李四科比张娜张芳 123 allenlverson bobdylan bob1 bob2 1nba）
<br/>

<label id="search_title">Search the website</label>
<input type="text" ID="search_text" runat="server"></input>
<input type="hidden" id="Result_text" />
</body>
</html>

实现的功能如截图所示：

技术分享

仿百度搜索引擎自动完成功能实现代码，实现同百度搜索一样的自动完成功能，希望能够帮助新学习Jquery的朋友，有需要的朋友可以下载,高手请多指点，下载地址：http://download.csdn.net/detail/javaquentin/8286573

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

Jquery 仿百度搜索引擎自动完成功能