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


Posted in Javascript onMarch 26, 2020

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

效果图:

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

Javascript 相关文章推荐
flash 得到自身url参数的代码
Nov 15 Javascript
论JavaScript模块化编程
Mar 07 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
javascript合并表格单元格实例代码
Jan 03 #Javascript
JS Array.slice 截取数组的实现方法
Jan 02 #Javascript
jquery实现简单的全选和反选功能
Jan 02 #Javascript
基于Javascript实现弹出页面效果
Jan 01 #Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 #Javascript
基于jQuery实现返回顶部实例代码
Jan 01 #Javascript
详解JavaScript 中的 replace 方法
Jan 01 #Javascript
You might like
thinkphp四种url访问方式详解
2014/11/28 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
javascript window对象属性整理
2009/10/24 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
JS中Location使用详解
2015/05/12 Javascript
js比较日期大小的方法
2015/05/12 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
基于python 字符编码的理解
2017/09/02 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
python中sys模块是做什么用的
2020/08/16 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
元旦获奖感言
2014/03/08 职场文书
党员个人对照检查材料
2014/10/01 职场文书
赔偿协议书
2015/01/27 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS