jQuery搜索框关键字智能匹配代码实例

当前位置：首页 > 代码实例 > html5 css3代码分类 > jQuery > jQuery搜索框关键字智能匹配代码实例

使用搜索引擎的朋友应该都有这样的体会，当在搜索框输入关键字的时候，会出现自能匹配现象。

非常好的用户体验，下面就是一段类似的代码，当然这里只是演示，数据都是本地固定好的。

在实际应用中可以才能够数据库读取数据。

代码实例如下:

[ jQuery ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>搜索框关键字智能匹配实例代码-51前端</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>

代码描述：jQuery搜索框关键字智能匹配。jQuery搜索框关键字智能匹配代码实例

下载全部收藏

245 326

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册