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

301 阅读 0 评论 199 点赞

我是靠谱客的博主甜甜橘子，这篇文章主要介绍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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!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>