搜尋框關鍵字智慧匹配例項程式碼例項

螞蟻小編發表於2017-02-27

使用搜尋引擎的朋友應該都有這樣的體會，當在搜尋框輸入關鍵字的時候，會出現自能匹配現象。

非常好的使用者體驗，下面就是一段類似的程式碼，當然這裡只是演示，資料都是本地固定好的。

在實際應用中可以才能夠資料庫讀取資料。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!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 src="http://libs.baidu.com/jquery/1.9.0/jquery.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);
 
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>

相關文章