基于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 相关文章推荐
jquery关于图形报表的运用实现代码
Jan 06 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
JavaScript中对象介绍
Dec 31 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 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 和 MySQL 基础教程(二)
2006/10/09 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
详解Vue 换肤方案验证
2019/08/28 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
解决python中的幂函数、指数函数问题
2019/11/25 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
零基础小白多久能学会python
2020/06/22 Python
Python如何操作docker redis过程解析
2020/08/10 Python
一套软件开发工程师笔试题
2015/05/18 面试题
数控加工专业毕业生自荐信
2013/09/27 职场文书
个人求职简历的自我评价
2013/10/19 职场文书
行政办公员自我评价分享
2013/12/14 职场文书
车间核算员岗位职责
2014/07/01 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
新党章心得体会
2014/09/04 职场文书
上班迟到检讨书
2014/09/15 职场文书
学生违反校规检讨书
2014/10/28 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript