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 相关文章推荐
jQuery登陆判断简单实现代码
Apr 21 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
js定时器实例分享
Dec 20 Javascript
node.js入门学习之url模块
Feb 25 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
JS+CSS实现过渡特效
Jan 02 Javascript
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中自定义错误页面和提示页面实例
2014/11/22 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
幼儿园教师培训方案
2014/02/04 职场文书
个性与发展自我评价
2014/02/11 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
推荐信格式要求
2014/05/09 职场文书
2014年财务科工作总结
2014/11/11 职场文书
党员读书活动心得体会
2016/01/14 职场文书