基于jQuery实现搜索关键字自动匹配功能


Posted in Javascript onMarch 26, 2020

今天我们就一起来看一个简单的基于jquery的关键字自动匹配的例子,希望文章能够对各位有帮助。

例子一

在项目中,有时候需要用户选择城市,但是城市太多,用户选择起来不太方便,所以提供了一个用户可以通过输入框输入城市的汉字或者拼音简写。结果示意图如下:

基于jQuery实现搜索关键字自动匹配功能

当输入拼音后结果示意图如下:

基于jQuery实现搜索关键字自动匹配功能

实现代码如下:

<html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "utf-8" ><script type="text/javascript" src="jquery.min.js"></script><body><input id="searchCityName" style="width: 100%;" type="text" placeholder="中文 / 拼音首字母" /> 
 <ul> 
 <li pinyin="bj" cityname="北京"><a href="/cityBranch/12.html">北京 </a></li> 
 <li pinyin="dl" cityname="大连"><a href="/cityBranch/14.html">大连 </a></li> 
 <li pinyin="sh" cityname="上海"><a href="/cityBranch/13.html">上海 </a></li> 
 <li pinyin="jn" cityname="济南"><a href="/cityBranch/15.html">济南 </a></li> 
 <li pinyin="gz" cityname="广州"><a href="/cityBranch/17.html">广州 </a></li> 
 <li pinyin="jh" cityname="金华"><a href="/cityBranch/18.html">金华 </a></li> 
 <li pinyin="wh" cityname="武汉"><a href="/cityBranch/19.html">武汉 </a></li> 
 <li pinyin="nj" cityname="南京"><a href="/cityBranch/20.html">南京 </a></li> 
 <li pinyin="sz" cityname="深圳"><a href="/cityBranch/22.html">深圳 </a></li> 
 <li pinyin="tj" cityname="天津"><a href="/cityBranch/21.html">天津 </a></li> 
 <li pinyin="cd" cityname="成都"><a href="/cityBranch/24.html">成都 </a></li> 
 <li pinyin="ly" cityname="临沂"><a href="/cityBranch/25.html">临沂 </a></li> 
 <li pinyin="cc" cityname="长春"><a href="/cityBranch/26.html">长春 </a></li> 
 <li pinyin="hz" cityname="杭州"><a href="/cityBranch/27.html">杭州 </a></li> 
 <li pinyin="nb" cityname="宁波"><a href="/cityBranch/28.html">宁波 </a></li> 
 <li pinyin="qd" cityname="青岛"><a href="/cityBranch/29.html">青岛 </a></li> 
 <li pinyin="sy" cityname="沈阳"><a href="/cityBranch/33.html">沈阳 </a></li> 
 </ul>
 <script>
 function searchCity() {
 var searchCityName = $("#searchCityName").val(); if (searchCityName == "") {
 $("ul li").show();
 } else {
 $("ul li").each(  function() {
  var pinyin = $(this).attr("pinyin");  var cityName = $(this).attr("cityName");  if (pinyin.indexOf(searchCityName) != -1
  || cityName.indexOf(searchCityName) != -1) {
  $(this).show();
  } else {
  $(this).hide();
  }
  });
 }
 }
 $('#searchCityName').bind('input propertychange', function() {
 searchCity();
 }); </script></body></html>

注意点:

1、当我想实现在输入框内实时查询列表值,想到的第一种方案是用ajax,但是想了一下发现列表的值基本是固定的,为什么不一次加载出来呢,所以把后台代码改了一下,将所有城市详情加载出来。
2、输入框内值改变需要触发事件,我第一个想法是用onchange,但是事实上onchange是输入框值改变且输入框失去焦点,所以我最终用了keyup。keyup在电脑上测试都没有问题,但是在微信端,怎么都不生效。于是将keyup替换成了最终的 bind(‘input propertychange', function() {} 。
3、在判断城市字符是否包含输入框内的字符时,我用contains函数,在火狐下测试没有任何问题,但是在chrome和微信客户端不生效。最后将contains替换成了indexOf。

例子二、使用jquery.autocomplete插件来实现。

1、使用设置

首页,要把插件的js代码嵌入到你自己的项目中去。

<script src="jquery.js" type="text/javascript"><!--mce:0--></script><script src="jquery.autocomplete.js" type="text/javascript"><!--mce:1--></script>

2、使用方法

为要实现自动匹配提示的 input 表单添加 AutoComplete 功能。

<input id="query" name="q" />
初始化 AutoComplete 对象,确保正确加载 DOM 对象,否则IE下的用户可能会出现错误。
$('#query').autocomplete({ serviceUrl: 'service/autocomplete.ashx', // Page for processing autocomplete requests minChars: 2, // Minimum request length for triggering autocomplete delimiter: /(,|;)\s*/, // Delimiter for separating requests (a character or regex) maxHeight: 400, // Maximum height of the suggestion list, in pixels width: 300, // List width zIndex: 9999, // List's z-index deferRequestBy: 0, // Request delay (milliseconds), if you prefer not to send lots of requests while the user is typing. I usually set the delay at 300 ms. params: { country: 'Yes'}, // Additional parameters onSelect: function(data, value){ }, // Callback function, triggered if one of the suggested options is selected, lookup: ['January', 'February', 'March'] // List of suggestions for local autocomplete });

根据文本表单中的输入信息,进行关键字提示匹配。

{ query:'Li', // Original request suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'], // List of suggestions data:['LR','LY','LI','LT'] // Optional parameter: list of keys for suggestion options; used in callback functions. } 
jQuery AutoComplete 插件支持 on/off功能,从而控制效果的开关。
var ac = $('#query').autocomplete({ /*parameters*/ }); ac.disable(); ac.enable(); ac.setOptons({ zIndex: 1001 });

3、设置表现样式

最后,用div和css美化表现效果。

<div class="autocomplete-w1"><div id="Autocomplete_1240430421731" class="autocomplete" style="width: 299px;"><div><strong>Li</strong>beria</div><div><strong>Li</strong>byan Arab Jamahiriya</div><div><strong>Li</strong>echtenstein</div><div class="selected"><strong>Li</strong>thuania</div></div></div> .autocomplete-w1 { background:url(img/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }.autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden; }.autocomplete .selected { background:#F0F0F0; }.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }.autocomplete strong { font-weight:normal; color:#3399FF; } jQuery AutoComplete

更多搜索功能实现的精彩文章,请点击专题:javascript搜索功能汇总 进行学习

以上分享的两个例子都是关于jQuery实现搜索关键字自动匹配功能的,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript 表单的友好用户体现
Jan 07 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
JavaScript函数详解
Nov 17 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
浅谈javascript的分号的使用
May 12 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 #Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 #Javascript
php利用curl获取远程图片实现方法
Oct 26 #Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 #Javascript
JavaScript中的数据类型转换方法小结
Oct 26 #Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 #Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 #Javascript
You might like
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
mac使用python识别图形验证码功能
2020/01/10 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
Python实现一个优先级队列的方法
2020/07/31 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
校庆活动方案
2014/03/31 职场文书
终止劳动合同协议书
2014/04/14 职场文书
2014年新教师工作总结
2014/11/08 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
党支部意见范文
2015/06/02 职场文书
党小组考察意见
2015/06/02 职场文书