JavaScript 搜尋關鍵字

Question

search() 方法用來找出一個字串在另一個字串中的位置。search() 的用途跟 indexOf() 相似，只是 search() 可以用正規表示式當參數。

目錄 Show

match() 介紹
步驟一: 取得 input 的文字內容，並使用 trim()、toLowerCase() 做字串處理
步驟二: 搭配 filter() 做篩選 (JS 第 50–53 行)
步驟三: 進行畫面渲染

語法：

str.search(regexp)

返回一個數字表示第一個找到的位置
第一個位置從 0 開始算起
找不到則返回 -1

用法：

var str = 'Apples are red, and apples are good.';
// 輸出 0
console.log(str.search(/apple/i));

match() 介紹

match() 函式可以用來做字串的比對，分析關鍵字是否存在於字串當中。
它是根據「正規表達式」來進行實作的。
「關鍵字」可以是中 / 英文。如果關鍵字存在，則 match() 會回傳一個包含那個關鍵字的陣列; 如果關鍵字不存在，則 match() 會回傳 null。
注意，關鍵字在字串中必須是「連續的」，像是以下範例的 keywordSeparate 就會回傳 null。

範例程式碼:

步驟一: 取得 input 的文字內容，並使用 trim()、toLowerCase() 做字串處理

.trim() 可以移除字串首尾的空白，避免發生錯誤;
.toLowerCase() 可以把英文字母都轉成小寫，建議要比對的字串、關鍵字都做這項處理，這樣不管輸入的關鍵字英文字母大小寫為何，都能找到相符合的產品。

步驟二: 搭配 filter() 做篩選 (JS 第 50–53 行)

設定「產品的標題」為欲比對的字串。

設定 filter() 的 return 條件為「match() 的回傳值」。如果關鍵字存在，則 match() 會回傳一個陣列; 如果關鍵字不存在，則 match() 會回傳 null。

在 JS 中，陣列為真值，會被轉換為 true; null 假值，會被轉換為 false (參考連結)

步驟三: 進行畫面渲染

這篇文章主要為大家分享了js實現搜尋框關鍵字智慧匹配程式碼，感興趣的朋友可以參考一下

只要使用搜索引擎的朋友應該都有這樣的體會，就是當在搜尋框輸入關鍵字的時候，會出現自能匹配現象，這絕對是非常好的使用者體驗，下面就是一段類似的程式碼，當然這裡只是掩飾，所以只能匹配的資料都是本地固定好的，在實際應用中可以才能夠資料庫讀取資料。

效果圖：

程式碼例項如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>搜尋框關鍵字智慧匹配例項程式碼</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">關鍵詞匹配搜尋</span>
 <input type="text" class="input_search_key" id="gover_search_key" placeholder="請輸入關鍵詞直接搜尋" />
 <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(); 
 } 
 //傳送請求，根據關鍵字到後臺查詢 
 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'); 
 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是假的'); 
 //將返回的資料傳遞給實現搜尋輸入框的輸入提示js類 
 searchSuggest.dataDisplay(aData); 
} 
</script>
</body>
</html>

更多關於搜尋功能的文章請檢視專題《JavaScript搜尋功能彙總》

希望本文所述對大家學習javascript程式設計有所幫助。