发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

JS中的Select框实现模糊搜索功能

刚辉模型

4

主题

4

帖子

12

积分

新手上路

Rank: 1

积分
12
显示全部楼层
您可以使用JavaScript来实现模糊搜索的功能，以下是一个简单的示例代码：
HTML部分：
  1. <select id="select">
  2.   <option value="1">Apple</option>
  3.   <option value="2">Banana</option>
  4.   <option value="3">Cherry</option>
  5.   <option value="4">Orange</option>
  6. </select>
复制代码
JavaScript部分：
  1. document.getElementById('select').addEventListener('input', function() {
  2.   var input, filter, option, i;
  3.   input = this.value;
  4.   filter = input.toUpperCase();
  5.   options = this.getElementsByTagName('option');
  6.   for (i = 0; i < options.length; i++) {
  7.     if (options[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
  8.       options[i].style.display = '';
  9.     } else {
  10.       options[i].style.display = 'none';
  11.     }
  12.   }
  13. });
复制代码
以上代码会监听select框的input事件，当用户输入内容时，会根据用户输入的内容来过滤选项。只有当某个选项的内容包含了用户输入的内容时，该选项才会显示出来，否则会被隐藏。这样就实现了模糊搜索的功能。
扩展：js实现模糊查询
今天为大家分享的是使用js实现模糊查询：
首先写出html
  1. <div class="search">
  2.         <input type="text" class="inp">
  3.         <div class="but">搜索</div>
  4. </div>
  5. <div class="list"></div>
复制代码
再写css
  1. * {
  2.         padding: 0;
  3.         margin: 0;
  4. }
  5. .search {
  6.         width: 96%;
  7.         margin-left: 2%;
  8.         height: 60px;
  9.         display: flex;
  10.         align-items: center;
  11.         justify-content: center;
  12. }
  13. .search input {
  14.         width: 60%;
  15.         height: 20px;
  16.         border: 1px #eeeeee solid;
  17.         padding: 5px;
  18.         border-top-left-radius: 20px;
  19.         border-bottom-left-radius: 20px;
  20. }
  21. .search div {
  22.         width: 20%;
  23.         height: 32px;
  24.         text-align: center;
  25.         line-height: 32px;
  26.         background-color: #eeeeee;
  27.         border-top-right-radius: 20px;
  28.         border-bottom-right-radius: 20px;
  29. }
  30. .list {
  31.         width: 96%;
  32.         margin-left: 2%;
  33. }
  34. .list div {
  35.         width: 100%;
  36.         height: 40px;
  37.         display: flex;
  38.         justify-content: space-around;
  39. }
  40. .list span {
  41.         display: block;
  42.         width: 20%;
  43.         line-height: 40px;
  44.         text-align: center;
  45. }
复制代码
现在结构样式都有的就该写数据了
  1. let arr = [{
  2.                         name: "吴小糖",
  3.                         addres: "河南",
  4.                         base: 410725,
  5.                         num: 9999
  6.                 }, {
  7.                         name: "吴三",
  8.                         addres: "浙江",
  9.                         base: 102419,
  10.                         num: 10000
  11.                 }, {
  12.                         name: "吴磊",
  13.                         addres: "北京",
  14.                         base: 314345,
  15.                         num: 5555
  16.                 }, {
  17.                         name: "吴谨言",
  18.                         addres: "湖南",
  19.                         base: 341026,
  20.                         num: 7888
  21.                 }, {
  22.                         name: "吴爽",
  23.                         addres: "河南",
  24.                         base: 410756,
  25.                         num: 6666
  26.                 }, {
  27.                         name: "吴宣仪",
  28.                         addres: "海南",
  29.                     base: 243187,
  30.                         num: 9999
  31.                 }]
复制代码

下一步就该js部分了
  1. let but = document.getElementsByClassName("but")[0];
  2. let inp = document.getElementsByClassName("inp")[0];
  3.         sorts(arr);
  4.         but.onclick = function() {
  5. let data = [];
  6.     for (let i = 0; i < arr.length; i++) {
  7.                         for (let k in arr[i]) {
  8.                                 if (String(arr[i][k]).indexOf(inp.value) > -1) {
  9.                                         data.push(arr[i]);
  10.                                                 break;
  11. }
  12. }
  13. }
  14.         sorts(data);
  15. }
  16. function sorts(a) {
  17.         let str = "";
  18.                 for (let i = 0; i < a.length; i++) {
  19.                         str += `<div>
  20.                                 <span>${a[i].name}</span>
  21.                                 <span>${a[i].base}</span>
  22.                                 <span>${a[i].num}</span>
  23.                                 <span>${a[i].addres}</span>
  24.                                         </div>`
  25.                 }
  26. document.getElementsByClassName("list")[0].innerHTML = str;
  27. }
复制代码
这样就制作完成了，整体代码如下：
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <title></title>
  6.         </head>
  7.         <body>
  8.                 <!DOCTYPE html>
  9.                 <html>
  10.                         <head>
  11.                                 <meta charset="utf-8">
  12.                                 <meta name="viewport" content="width=device-width, initial-scale=1">
  13.                                 <title></title>
  14.                                 <style>
  15.                                         * {
  16.                                                 padding: 0;
  17.                                                 margin: 0;
  18.                                         }
  19.                                         .search {
  20.                                                 width: 96%;
  21.                                                 margin-left: 2%;
  22.                                                 height: 60px;
  23.                                                 display: flex;
  24.                                                 align-items: center;
  25.                                                 justify-content: center;
  26.                                         }
  27.                                         .search input {
  28.                                                 width: 60%;
  29.                                                 height: 20px;
  30.                                                 border: 1px #eeeeee solid;
  31.                                                 padding: 5px;
  32.                                                 border-top-left-radius: 20px;
  33.                                                 border-bottom-left-radius: 20px;
  34.                                         }
  35.                                         .search div {
  36.                                                 width: 20%;
  37.                                                 height: 32px;
  38.                                                 text-align: center;
  39.                                                 line-height: 32px;
  40.                                                 background-color: #eeeeee;
  41.                                                 border-top-right-radius: 20px;
  42.                                                 border-bottom-right-radius: 20px;
  43.                                         }
  44.                                         .list {
  45.                                                 width: 96%;
  46.                                                 margin-left: 2%;
  47.                                         }
  48.                                         .list div {
  49.                                                 width: 100%;
  50.                                                 height: 40px;
  51.                                                 display: flex;
  52.                                                 justify-content: space-around;
  53.                                         }
  54.                                         .list span {
  55.                                                 display: block;
  56.                                                 width: 20%;
  57.                                                 line-height: 40px;
  58.                                                 text-align: center;
  59.                                         }
  60.                                 </style>
  61.                         </head>
  62.                         <body>
  63.                                 <div class="search">
  64.                                         <input type="text" class="inp">
  65.                                         <div class="but">搜索</div>
  66.                                 </div>
  67.                                 <div class="list"></div>
  68.                                 <script type="text/javascript">
  69.                                         let arr = [{
  70.                                                 name: "吴小糖",
  71.                                                 addres: "河南",
  72.                                                 base: 410725,
  73.                                                 num: 9999
  74.                                         }, {
  75.                                                 name: "吴三",
  76.                                                 addres: "浙江",
  77.                                                 base: 102419,
  78.                                                 num: 10000
  79.                                         }, {
  80.                                                 name: "吴磊",
  81.                                                 addres: "北京",
  82.                                                 base: 314345,
  83.                                                 num: 5555
  84.                                         }, {
  85.                                                 name: "吴谨言",
  86.                                                 addres: "湖南",
  87.                                                 base: 341026,
  88.                                                 num: 7888
  89.                                         }, {
  90.                                                 name: "吴爽",
  91.                                                 addres: "河南",
  92.                                                 base: 410756,
  93.                                                 num: 6666
  94.                                         }, {
  95.                                                 name: "吴宣仪",
  96.                                                 addres: "海南",
  97.                                                 base: 243187,
  98.                                                 num: 9999
  99.                                         }]
  100.                                         let but = document.getElementsByClassName("but")[0];
  101.                                         let inp = document.getElementsByClassName("inp")[0];
  102.                                         sorts(arr);
  103.                                         but.onclick = function() {
  104.                                                 let data = [];
  105.                                                 for (let i = 0; i < arr.length; i++) {
  106.                                                         for (let k in arr[i]) {
  107.                                                                 if (String(arr[i][k]).indexOf(inp.value) > -1) {
  108.                                                                         data.push(arr[i]);
  109.                                                                         break;
  110.                                                                 }
  111.                                                         }
  112.                                                 }
  113.                                                 sorts(data);
  114.                                         }
  115.                                         function sorts(a) {
  116.                                                 let str = "";
  117.                                                 for (let i = 0; i < a.length; i++) {
  118.                                                         str += `<div>
  119.                                                                                 <span>${a[i].name}</span>
  120.                                                                                 <span>${a[i].base}</span>
  121.                                                                                 <span>${a[i].num}</span>
  122.                                                                                 <span>${a[i].addres}</span>
  123.                                                                                 </div>`
  124.                                                 }
  125.                                                 document.getElementsByClassName("list")[0].innerHTML = str;
  126.                                         }
  127.                                 </script>
  128.                         </body>
  129.                 </html>
  130.         </body>
  131. </html>
复制代码
以上就是本章的全部内容，感谢您的阅读。
到此这篇关于JS实现select框实现模糊搜索功能的文章就介绍到这了,更多相关js模糊搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/322328ev2.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

上一篇: 解决vue-cli项目sourcemap因为文件重名导致的文件定位映射错误问题

下一篇: vue cli如何配置开发环境下的sourcemap

发表于 2024-6-11 11:26:13 来自手机

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4