首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

- Author -

程序员小菜

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
一个不错的用JavaScript实现的UBB编码函数
Mar 09 Javascript
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
JS简单计算器实例
Jan 20 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 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
驱动模型(1) 自动播放(1) 信息校验(1) Coroutine(1) greenlet(1) 正则表达式(3) 分区(2) 静态压缩(1) 乱码(3) Excel(4)
You might like
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
详解Python的单元测试
2015/04/28 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
工程力学专业毕业生求职信
2013/10/06 职场文书
新闻专业应届生求职信
2013/10/31 职场文书
初中体育教学反思
2014/01/14 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
移风易俗倡议书
2014/04/15 职场文书
大学生学习计划书
2014/09/15 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
2019年汽车租赁合同范本！
2019/08/12 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android