實現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,100);}) 
 } 
 var hideSuggest = function(){ 
  suggestWrap.hide(); 
 } 
 //發送請求，根據關鍵字到后台查詢 
 var sendKeyWord = function(event){ 
  //鍵盤選擇下拉項 
  if(suggestWrap.css('display')=='block'&&event.keyCode == 38||event.keyCode == 40)
  { 
   var current = suggestWrap.find('li.hover'); 
   if(event.keyCode == 38)
   { 
    if(current.length>0)
    { 
     var prevLi = current.removeClass('hover').prev(); 
     if(prevLi.length>0)
     { 
      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 == 40)
   { 
    if(current.length>0)
    { 
     var nextLi = current.removeClass('hover').next(); 
     if(nextLi.length>0)
     { 
      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<=0)
  { 
   suggestWrap.hide(); 
   return; 
  } 
  //往搜索框下拉建議顯示欄中添加條目並顯示 
  var li; 
  var tmpFrag = document.createDocumentFragment(); 
  suggestWrap.find('ul').html(''); 
  for(var i=0; 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區域。

主要代碼摘錄一匿名大神