您现在的位置是：首页 > 学无止境 > web前端web前端

前端jQuery实现搜索功能自动匹配

AndyGuo2020-05-08 17:05:58【web前端】1460人已围观

简介很多网站都有搜索功能，但是我们发现大部分网站的搜索功能都是用了PHP程序搜索数据库内容的，那么能不能纯前端实现搜索呢，答案是可以的。

很多网站都有搜索功能，但是我们发现大部分网站的搜索功能都是用了PHP程序搜索数据库内容的，那么能不能纯前端实现搜索呢，答案是可以的。本篇文章带大家用jquery实现前端的搜索功能并且实时显示结果。

例1

在我们做网站时，用表单收集客户信息时，会让客户填写自己的地址，下拉框选择省市区的形式，有时候找起来比较麻烦，我们可以带一个搜索框而让用户输入拼音首字母或全称时能快速显示出来，看效果

输入拼音或首写字母后的效果：

实现代码如下：


  1. <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="中文 / 拼音首字母" />  

  2.  <ul>  

  3.   <li pinyin="bj" cityname="北京"><a href="/cityBranch/12.html">北京 </a></li>  

  4.   <li pinyin="dl" cityname="大连"><a href="/cityBranch/14.html">大连 </a></li>  

  5.   <li pinyin="sh" cityname="上海"><a href="/cityBranch/13.html">上海 </a></li>  

  6.   <li pinyin="jn" cityname="济南"><a href="/cityBranch/15.html">济南 </a></li>  

  7.   <li pinyin="gz" cityname="广州"><a href="/cityBranch/17.html">广州 </a></li>  

  8.   <li pinyin="jh" cityname="金华"><a href="/cityBranch/18.html">金华 </a></li>  

  9.   <li pinyin="wh" cityname="武汉"><a href="/cityBranch/19.html">武汉 </a></li>  

  10.   <li pinyin="nj" cityname="南京"><a href="/cityBranch/20.html">南京 </a></li>  

  11.   <li pinyin="sz" cityname="深圳"><a href="/cityBranch/22.html">深圳 </a></li>  

  12.   <li pinyin="tj" cityname="天津"><a href="/cityBranch/21.html">天津 </a></li>  

  13.   <li pinyin="cd" cityname="成都"><a href="/cityBranch/24.html">成都 </a></li>  

  14.   <li pinyin="ly" cityname="临沂"><a href="/cityBranch/25.html">临沂 </a></li>  

  15.   <li pinyin="cc" cityname="长春"><a href="/cityBranch/26.html">长春 </a></li>  

  16.   <li pinyin="hz" cityname="杭州"><a href="/cityBranch/27.html">杭州 </a></li>  

  17.   <li pinyin="nb" cityname="宁波"><a href="/cityBranch/28.html">宁波 </a></li>  

  18.   <li pinyin="qd" cityname="青岛"><a href="/cityBranch/29.html">青岛 </a></li>  

  19.   <li pinyin="sy" cityname="沈阳"><a href="/cityBranch/33.html">沈阳 </a></li>  

  20.  </ul>  

  21.  <script>  

  22.   function searchCity() {  

  23.     var searchCityName = $("#searchCityName").val();    if (searchCityName == "") {  

  24.       $("ul li").show();  

  25.     } else {  

  26.       $("ul li").each(          function() {  

  27.             var pinyin = $(this).attr("pinyin");            var cityName = $(this).attr("cityName");            if (pinyin.indexOf(searchCityName) != -1  

  28.                 || cityName.indexOf(searchCityName) != -1) {  

  29.               $(this).show();  

  30.             } else {  

  31.               $(this).hide();  

  32.             }  

  33.           });  

  34.     }  

  35.   }  

  36.   $('#searchCityName').bind('input propertychange', function() {  

  37.     searchCity();  

  38.   }); </script></body></html>  

顶一下 （0） 赏 踩一下 （0）
小郭博客

相关文章

最新发表

标签云 更多

点击排行

站长特荐

关闭
QQ 微信 支付宝扫一扫打赏