开启辅助访问
切换到宽版

天天ASP家园官方Q群

天天ASP家园网友互动群

群1: 697497501(新手学习互助群)

群2: 47598123(进阶应用群)

天天ASP家园»论坛 › 技术交流 › 前端技术 › js 实时监听搜索内容，即搜即查。
返回列表 发新帖
查看: 496|回复: 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>
复制代码



ASP币如何冲？请看这里
回复

使用道具 举报

 楼主| 冰河非非 发表于 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. }

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

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

再来一段。

ASP币如何冲？请看这里
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

在线客服

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