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

源代码如下所示：

<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>

<script type="text/javascript">
//实现自动完成功能 像百度一样的功能
$(document).ready(function(e) {
   //Bug:汉字不能查询的问题和空值的时候要出现值
   var jsonData=["张三","李四","1科比","罗晋","张娜","张芳","123","allen lverson","bob dylan","bob1","bob2","1nba"];
   var selectedItem = null; //定义全局变量
   var old_searchtext = null;
   var $autoComplete = $('<ul class="autocomplete"></ul>').hide().insertAfter('#search_text');
   //定义函数获取鼠标显示颜色
   var setSelectedItem = function (item, eventKeyCode) {
    selectedItem = item;
    if (selectedItem == null || $('ul[class="autocomplete"]').find("li").length <= 0) {
     //没有选择值则移除ul
     $('ul[class="autocomplete"]').empty().hide();
     return false;
    }

    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.youkuaiyun.com/detail/javaquentin/8286573

如觉得文章不错，可扫码打赏，以激励上传更好的开源代码：