基于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 相关文章推荐
js select常用操作控制代码
Mar 16 Javascript
Jquery 滑入滑出效果实现代码
Mar 27 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
JS数据类型分类及常用判断方法
Nov 19 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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
用PHP和ACCESS写聊天室(三)
2006/10/09 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
PHP代码优化技巧小结
2015/09/29 PHP
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
python pdb调试方法分享
2014/01/21 Python
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
实习生自荐信范文
2013/11/13 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
个人租房协议书
2014/04/09 职场文书
1亿有多大教学反思
2014/05/01 职场文书
好学生评语大全
2014/05/05 职场文书
中学音乐课教学反思
2016/02/18 职场文书
java泛型通配符详解
2021/07/25 Java/Android
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers
js 实现验证码输入框示例详解
2022/09/23 Javascript