只要使用搜索引擎的朋友應(yīng)該都有這樣的體會，就是當在搜索框輸入關(guān)鍵字的時候，會出現(xiàn)自能匹配現(xiàn)象，這絕對是非常好的用戶體驗，下面就是一段類似的代碼，當然這里只是掩飾，所以只能匹配的數(shù)據(jù)都是本地固定好的，在實際應(yīng)用中可以才能夠數(shù)據(jù)庫讀取數(shù)據(jù)。

效果圖：

代碼實例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>搜索框關(guān)鍵字智能匹配實例代碼</title>
<style>
body, ul, li 
{
 margin:0;
 padding:0;
}
body 
{
 font-size:12px;
 font-family:sumsun, arial;
 background:#FFFFFF;
}
.gover_search 
{
 position:relative;
 z-index:99;
 height:63px;
 padding:15px 0 0 20px;
 border:1px solid #b8cfe6;
 border-bottom:0;
 background:url(../images/gover_search_bg.gif) repeat-x 0 0;
}
.gover_search_form {height:36px;}
.gover_search .search_t 
{
 float:left;
 width:112px;
 line-height:26px;
 color:#666;
}
.gover_search .input_search_key 
{
 float:left;
 width:462px;
 height:18px;
 padding:3px;
 margin-right:5px;
 border:1px solid #ccc;
 line-height:18px;
 background:#fff;
}
.gover_search .search_btn 
{
 float:left;
 width:68px;
 height:26px;
 overflow:hidden;
 border:1px solid #ccc;
 text-align:center;
 color:#ff3300;
 letter-spacing:5px;
 background:url(../images/gover_search_bg.gif) no-repeat 0 -79px;
 cursor:pointer;
 font-weight:bold;
}
.gover_search .search_suggest 
{
 position:absolute;
 z-index:999;
 left:132px;
 top:41px;
 width:468px;
 border:1px solid #ccc;
 border-top:none;
 display:none;
 color:#004080;
}
.gover_search .search_suggest li 
{
 height:24px;
 overflow:hidden;
 padding-left:3px;
 line-height:24px;
 background:#fff;
 cursor:default;
}
.gover_search .search_suggest li.hover {background:#ddd;}
.num_right 
{
 float:right;
 text-align:right;
 line-height:24px;
 padding-right:10px
}
</style>
</head>
<body>
<div class="gover_search">
 <div class="gover_search_form clearfix"> 
 <span class="search_t">關(guān)鍵詞匹配搜索</span>
 <input type="text" class="input_search_key" id="gover_search_key" placeholder="請輸入關(guān)鍵詞直接搜索" />
 <button type="submit" class="search_btn">搜索</button>
 <div class="search_suggest" id="gov_search_suggest">
 <ul>
 </ul>
 </div>
 </div>
</div>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
function oSearchSuggest(searchFuc)
{ 
 var input = $('#gover_search_key'); 
 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(); 
 } 
 //發(fā)送請求，根據(jù)關(guān)鍵字到后臺查詢 
 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; 
 } 
 } 
 //請求返回后，執(zhí)行數(shù)據(jù)展示 
 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,參數(shù)為進行查詢操作時要調(diào)用的函數(shù)名 
var searchSuggest = new oSearchSuggest(sendKeyWordToBack); 
//這是一個模似函數(shù)，實現(xiàn)向后臺發(fā)送ajax查詢請求，并返回一個查詢結(jié)果數(shù)據(jù)，傳遞給前臺的JS,再由前臺JS來展示數(shù)據(jù)。本函數(shù)由程序員進行修改實現(xiàn)查詢的請求 
//參數(shù)為一個字符串，是搜索輸入框中當前的內(nèi)容 
function sendKeyWordToBack(keyword){ 
 var aData = []; 
 aData.push('<span class="num_right">約100個</span>'+keyword+'返回數(shù)據(jù)1'); 
 aData.push('<span class="num_right">約200個</span>'+keyword+'返回數(shù)據(jù)2'); 
 aData.push('<span class="num_right">約100個</span>'+keyword+'返回數(shù)據(jù)3'); 
 aData.push('<span class="num_right">約50000個</span>'+keyword+'返回數(shù)據(jù)4'); 
 aData.push('<span class="num_right">約1044個</span>'+keyword+'2012是真的'); 
 aData.push('<span class="num_right">約100個</span>'+keyword+'2012是假的'); 
 aData.push('<span class="num_right">約100個</span>'+keyword+'2012是真的'); 
 aData.push('<span class="num_right">約100個</span>'+keyword+'2012是假的'); 
 //將返回的數(shù)據(jù)傳遞給實現(xiàn)搜索輸入框的輸入提示js類 
 searchSuggest.dataDisplay(aData); 
} 
</script>
</body>
</html>

更多關(guān)于搜索功能的文章請查看專題《JavaScript搜索功能匯總》

希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。

您可能感興趣的文章: