查看: 324|回复: 1

[文章教程] js 实时监听搜索内容,即搜即查。

[复制链接]
冰河非非 发表于 2022-12-13 23:05:17 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7.                         table tr th,table tr td{
  8.                                 padding: 10px;
  9.                         }
  10.                         table{
  11.                                 margin-bottom: 20px;
  12.                         }
  13.                 </style>
  14. </head>
  15. <body>
  16. <input type="text" name="" id="input" value="" placeholder="请输入查询关键字" />
  17. <input type="button" name="" id="search" value="搜索" />
  18. <ul id="list">
  19.   <li>哈哈哈</li>
  20.   <li>啦啦啦</li>
  21.   <li>六六六</li>
  22.   <li>biubiu</li>
  23.   <li>噗噗噗</li>
  24. </ul>
  25. </body>
  26. </html>
  27.   
  28. <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  29. <script type="text/javascript">
  30.         // 实时监听搜索内容
  31.         var text = "";  
  32.         setInterval(function(){  
  33.             text = $('#input').val();//获取文本框输入  
  34.             if($.trim(text) != ""){  
  35.                     $("#list li").hide().filter(":contains('"+text+"')").show();  
  36.             }else{  
  37.                 $('#list tr').show();//当删除文本框的内容时,又重新显示表格所有内容  
  38.             }  
  39.         },100);  
  40.        
  41.         //通过点击按钮开始筛选  
  42.         $(function() {
  43.                 $('#search').click(function() {
  44.                         var text = $('#input').val(); //获取文本框输入  
  45.                         if($.trim(text) != "") {
  46.                                 $("#table tr:not('#theader')").hide().filter(":contains('" + text + "')").show();
  47.                         }
  48.                 })
  49.         });
  50. </script>
  51. </body>
  52. </html>
复制代码



 楼主| 冰河非非 发表于 2022-12-14 16:15:51 | 显示全部楼层
  1. <html>
  2. <head>
  3. <title>实时查询</title>
  4. <style>
  5. label:before
  6. {
  7. content:"*";
  8. color:red;
  9. font-size:120%;
  10. vertical-align:middle;
  11. }

  12. </style>
  13. </head>
  14. <meta charset = "utf-8" >
  15. <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
  16. <body>
  17. <label for="searchCityName">查询</label>
  18. <input id="searchCityName" style="width: 20%;" type="text" placeholder="中文 / 拼音首字母" />
  19. <ul>
  20.   <li pinyin="bj" cityname="北京"><a href="">北京 </a></li>
  21.   <li pinyin="dl" cityname="大连"><a href="">大连 </a></li>
  22.   <li pinyin="sh" cityname="上海"><a href="">上海 </a></li>
  23.   <li pinyin="jn" cityname="济南"><a href="">济南 </a></li>
  24.   <li pinyin="gz" cityname="广州"><a href="">广州 </a></li>
  25.   <li pinyin="jh" cityname="金华"><a href="">金华 </a></li>
  26.   <li pinyin="wh" cityname="武汉"><a href="">武汉 </a></li>
  27.   <li pinyin="nj" cityname="南京"><a href="">南京 </a></li>
  28.   <li pinyin="sz" cityname="深圳"><a href="">深圳 </a></li>
  29.   <li pinyin="tj" cityname="天津"><a href="">天津 </a></li>
  30.   <li pinyin="cd" cityname="成都"><a href="">成都 </a></li>
  31.   <li pinyin="ly" cityname="临沂"><a href="">临沂 </a></li>
  32.   <li pinyin="cc" cityname="长春"><a href="">长春 </a></li>
  33.   <li pinyin="hz" cityname="杭州"><a href="">杭州 </a></li>
  34.   <li pinyin="nb" cityname="宁波"><a href="">宁波 </a></li>
  35.   <li pinyin="qd" cityname="青岛"><a href="">青岛 </a></li>
  36.   <li pinyin="sy" cityname="沈阳"><a href="">沈阳 </a></li>
  37. </ul>
  38. <script>
  39. function searchCity() {
  40. var searchCityName = $("#searchCityName").val();

  41. if (searchCityName == "") {
  42. $("ul li").show();
  43. } else {
  44. $("ul li").each(
  45. function() {
  46. var pinyin = $(this).attr("pinyin");
  47. var cityName = $(this).attr("cityName");
  48. if (pinyin.indexOf(searchCityName) != -1 || cityName.indexOf(searchCityName) != -1) {
  49. $(this).show();
  50. } else {
  51. $(this).hide();
  52. }
  53. });
  54. }
  55. }
  56. $('#searchCityName').bind('input propertychange', function() {
  57. searchCity();
  58. });
  59. </script>
  60. </body>
  61. </html>
复制代码

再来一段。

您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表

在线客服

售前咨询
售后咨询
服务热线
023-58418553
微信公众号