实现input输入时智能搜索

//      智能搜索
function oSearchSuggest(searchFuc)
{
 var input = $('#in');
 var suggestWrap = $('#gov_search_suggest');
 var key = "";
 var init = function(){
  input.bind('keyup',sendKeyWord);
  input.bind('blur',function(){setTimeout(hideSuggest,);})
 }
 var hideSuggest = function(){
  suggestWrap.hide();
 }
 //发送请求，根据关键字到后台查询
 var sendKeyWord = function(event){
  //键盘选择下拉项
  if(suggestWrap.css('display')=='block'&&event.keyCode == ||event.keyCode == )
  {
   var current = suggestWrap.find('li.hover');
   if(event.keyCode == )
   {
    if(current.length>)
    {
     var prevLi = current.removeClass('hover').prev();
     if(prevLi.length>)
     {
      prevLi.addClass('hover');
      input.val(prevLi.html());
     }
    }
    else
    {
     var last = suggestWrap.find('li:last');
     last.addClass('hover');
     input.val(last.html());
    }
   }
   else if(event.keyCode == )
   {
    if(current.length>)
    {
     var nextLi = current.removeClass('hover').next();
     if(nextLi.length>)
     {
      nextLi.addClass('hover');
      input.val(nextLi.html());
     }
    }
    else
    {
     var first = suggestWrap.find('li:first');
     first.addClass('hover');
     input.val(first.html());
    }
   }
   //输入字符
  }
  else
  {
   var valText = $.trim(input.val());
   if(valText ==''||valText==key)
   {
    return;
   }
   searchFuc(valText);
   key = valText;
  }
 }
 //请求返回后，执行数据展示
 this.dataDisplay = function(data){
  if(data.length<=)
  {
   suggestWrap.hide();
   return;
  }
  //往搜索框下拉建议显示栏中添加条目并显示
  var li;
  var tmpFrag = document.createDocumentFragment();
  suggestWrap.find('ul').html('');
  for(var i=; i<data.length; i++)
  {
   li = document.createElement('LI');
   li.innerHTML = data[i];
   tmpFrag.appendChild(li);
  }
  suggestWrap.find('ul').append(tmpFrag);
  suggestWrap.show();
  //为下拉选项绑定鼠标事件
  suggestWrap.find('li').hover(function(){
   suggestWrap.find('li').removeClass('hover');
   $(this).addClass('hover');
  },function(){
   $(this).removeClass('hover');
  }).bind('click',function(){
   $(this).find("span").remove();
   input.val(this.innerHTML);
   suggestWrap.hide();
  });
 }
 init();
};
//实例化输入提示的JS,参数为进行查询操作时要调用的函数名
var searchSuggest = new oSearchSuggest(sendKeyWordToBack);
//这是一个模似函数，实现向后台发送ajax查询请求，并返回一个查询结果数据，传递给前台的JS,再由前台JS来展示数据。本函数由程序员进行修改实现查询的请求
//参数为一个字符串，是搜索输入框中当前的内容
function sendKeyWordToBack(keyword){
 var aData = [];
 aData.push('<span class="num_right">约100个</span>'+keyword+'返回数据1');
 aData.push('<span class="num_right">约200个</span>'+keyword+'返回数据2');
 aData.push('<span class="num_right">约100个</span>'+keyword+'返回数据3');
 aData.push('<span class="num_right">约50000个</span>'+keyword+'返回数据4');
 //将返回的数据传递给实现搜索输入框的输入提示js类
 searchSuggest.dataDisplay(aData);
}
//步骤：
//1.读取搜索框中的内容$("#搜索框id").val()      （这个是jquery方式读取，用js方式也一样）
//2.用ajax异步请求(异步的话不会卡，数据量不大的话同步也行),这时候一般需要数据库返回所需的内容，接下来就在ajax的success中操作了。
// 3.success中:将读取到的返回值data解析，分别存储在相应的变量中。
// 4.你可以选择使用datatable插件将解析出来的数据显示出来，或者使用<table>标签，然后用
//               for(var i in datas){
//                      var tr = "";
//                      var tempData = [datas[i].logTime,datas[i].logType,datas[i].name];
//                      for(var j in tempData){
//                          tr += "<td>" + tempData[j] + "</td>";
//                      }
//                      tr = "<tr>" + tr + "</tr>";
//                      $('#log_table_tbody').append(tr);
//                  }方式将数据加上去

 mui.init({
        keyEventBind: {
            backbutton: true  //打开back按键监听
        }
    });
        </script>

注释：

 $('#in'); 为input

$('#gov_search_suggest');为智能搜索时出现的ul区域。

主要代码摘录一匿名大神