js实现搜索框关键字智能匹配代码

2024-10-04 16:14:29

只要使用搜索引擎的朋友应该都有这样的体会，就是当在搜索框输入关键字的时候，会出现自能匹配现象，这绝对是非常好的用户体验，下面就是一段类似的代码，当然这里只是掩饰，所以只能匹配的数据都是本地固定好的，在实际应用中可以才能够数据库读取数据。

效果图：

代码实例如下:

<!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程序设计有所帮助。

javascript搜索自动提示功能的实现第1/3页

使用 jQuery(Ajax)/PHP/MySQL实现自动完成功能一如往常,demo和源码的zip包在文章最后,慢慢欣赏吧! 我觉得我有必要写这个教程,因为曾经见到的大部分关于自动完成的应用程序都只是给你一个程序源码包,然后告诉你怎么使用,而不是告诉你它是如何工作的以及为什么这样做.而知道这些可以让你对这个插件可以进一步的按自己的需求定制(关于这一点我在我的blog里写过不少关于其他应用的文章). 好,我们现在开始. JavaScript代码: 复制代码代码如下: <script src=&quo
javascript 关键字高亮显示实现代码

关键字高亮显示我们是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascript等编程资料,是网页制作,网络编程,网站建设人士的聚集场所. 提供最新的网络编程.脚本编程.网页制作.网页设计.网页特效,为站长与网络编程从业者提供学习资料. 脚本,vbscript,正则表达式,jquery,dos,bat,批处理,javascript,Photoshop,HTML,div+css,ASP,PHP,ASP.NET
JavaScript正则方法replace实现搜索关键字高亮显示

前言正则表达式是字符串处理工具中强有力的工具.也有人认为这只是一个小玩具,但不管怎么说都离不开它. 这里介绍的是JavaScript的正则表达式的replace方法 ,和实现搜索关键字高亮的功能. 先介绍一下正则表达式的replace方法 replace介绍 w3school原文链接介绍正则表达式如何使用特殊字符$来表示原来的文本,这是实现搜索高亮的关键, var str = "asad sad 123 sd qwe21"; str.replace(/\d+/img,"数
JS仿百度搜索自动提示框匹配查询功能

1. 添加动态加载css文件不需要引入css css全部在JS动态生成.2. 不需要额外的标签只需要一个input输入框并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置),因为输入框匹配值后需要一个隐藏域所以需要隐藏域增加一个class "hiddenCls" 当然也支持自己配置参数. 如下代码: 复制代码代码如下: <div class=&q
JS实现静态页面搜索并高亮显示功能完整示例

本文实例讲述了JS实现静态页面搜索并高亮显示功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS搜索</title> </head> <body> <input id="key-word" class="k
JS实现表格数据各种搜索功能的方法

本文实例讲述了JS实现表格数据各种搜索功能.可忽略大小写,模糊搜索,多关键搜索.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onl
JavaScript实现的搜索及高亮显示功能示例

本文实例讲述了JavaScript实现的搜索及高亮显示功能.分享给大家供大家参考,具体如下: 情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮, 或者将不匹配的隐藏掉效果图: html: <div class="contracts-header">名称: <input type="text" value="" id="sea
Angularjs实现搜索关键字高亮显示效果

需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字细节分析: 1.每次执行搜索操作,需清空上一次结果 2.需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况代码思路: 利用正则表达式匹配关键字使用javascript字符串替换的方式,将关键字替换成<span class='red'>关键字</span> 为了避免出现当关键字为 'p' 时候,将标签<p>替换成<<span>p</span>
用JS将搜索的关键字高亮显示实现代码

用JS让文章内容指定的关键字加亮是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...不知道怎样来实现这样的功能啊?特此求助复制代码代码如下: <script language="JavaScript">function highlight(key) { var key = key.split('|'); for (var i=0; i<key.
可以用来搜索当前页面内容的js代码

搜索页面内容 var NS4 = (document.layers); var IE4 = (document.all); // window to search. var win = window; var n = 0; function findInPage(str) { var txt, i, found; if (str == "") return false; if (NS4) { if (!win.find(str)) while(win.find(str, false,

js实现搜索框关键字智能匹配代码

相关推荐

随机推荐