基于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 Tab 导航插件 (23个)
Jun 11 Javascript
js AspxButton的客户端操作
Jun 26 Javascript
Jquery之美中不足小结
Feb 16 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
以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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
php学习之简单计算器实现代码
2011/06/09 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
Python3中的2to3转换工具使用示例
2015/06/12 Python
详解Django中Request对象的相关用法
2015/07/17 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
python爬取指定微信公众号文章
2018/12/20 Python
python配置grpc环境
2019/01/01 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
法国春天百货官网:Printemps.com
2020/06/29 全球购物
护理专业推荐信
2013/11/07 职场文书
学校运动会霸气口号
2014/06/07 职场文书
百日安全生产活动总结
2014/07/05 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
房屋产权证明书
2014/10/15 职场文书
教师岗位职责范本
2015/04/02 职场文书