首页
所有分类
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操作文本框readOnly
May 15 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
angular4+百分比进度显示插件用法示例
May 05 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) JDBC(3) Eclipse(1) 日志(1) Word(2) 太阳码(1) pdf(1) openGauss(1) 二维码(2) 条码(1)
You might like
MySQL授权问题总结
2007/05/06 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
JavaScript高级程序设计阅读笔记（六） ECMAScript中的运算符（二）
2012/02/27 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
JavaScript字符串对象的concat方法实例（用于连接两个或多个字符串）
2014/10/16 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
js实现短信发送倒计时功能（正则验证）
2017/02/10 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
python处理文本文件并生成指定格式的文件
2014/07/31 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
你在项目中用到了xml技术的哪些方面？如何实现的？
2014/01/26 面试题
仓库理货员岗位职责
2013/12/18 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
诉前财产保全担保书
2014/05/20 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
新闻学专业职业生涯规划范文：我的人生我做主
2014/09/12 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
单位病假条范文
2015/08/17 职场文书
Oracle中update和select 关联操作
2022/01/18 Oracle