vue 搜索框模糊查询 + 优化(节流) + 关键字高亮

实际效果：

防抖

事件响应函数在一段时间后才执行，如果在这段时间内再次调用，则重新计算执行时间；当预定的时间内没有再次调用该函数，则执行doSomeThing方法。

应用场景：

1. scroll事件滚动触发
2. 搜索框输入查询
3. 表单验证
4. 按钮提交事件
5. 浏览器窗口缩放，resize事件

节流

如果你触发事件，每隔一段时间，只执行一次事件。

  1 <template>
  2   <div class="wrapper">
  3     <van-nav-bar title="党员组织关系转入" />
  4     <van-form @submit="onSubmit">
  5       <van-cell-group>
  6         <div class="label"><span class="require">*</span>转入党支部</div>
  7         <div class="van-search-wrapper">
  8           <van-search
  9             v-model="newParty"
 10             placeholder="请输入搜索关键词"
 11             @input="partySearch"
 12           />
 13           <ul class="van-search-list" v-if="showNewPartyList">
 14             <li
 15               class="van-search-item"
 16               v-for="item in newPartyList"
 17               :key="item.orgId"
 18               @click="selectNewParty(item)"
 19               v-html="item.orgFullName"
 20             ></li>
 21           </ul>
 22         </div>
 23
 24         <div class="label"><span class="require">*</span>介绍信</div>
 25         <van-uploader>
 26           <div class="upload-box"><i class="icon-upload"></i>上传文件</div>
 27         </van-uploader>
 28       </van-cell-group>
 29       <div style="margin: 16px">
 30         <van-button round block type="danger" native-type="submit"
 31           >提交</van-button
 32         >
 33       </div>
 34     </van-form>
 35   </div>
 36 </template>
 37
 38 <script>
 39 export default {
 40   data() {
 41     return {
 42       newParty: "",
 43       newPartyList: [],
 44       showNewPartyList: false,
 45     };
 46   },
 47   methods: {
 48     debounce(fn, delay) {
 49       let t = null;
 50       return function () {
 51         if (t !== null) {
 52           clearTimeout(t);
 53         }
 54         t = setTimeout(() => {
 55           fn();
 56         }, delay);
 57       };
 58     },
 59     partySearch() {
 60       this.debounce(this.newPartySearch(), 1000);
 61     },
 62     async newPartySearch() {
 63       // 防抖操作
 64       let { data } = await this.$http.get(
 65         "/party/h5/transfer/in/getPartyOrgData",
 66         {
 67           params: {
 68             orgFullName: this.newParty,
 69           },
 70         }
 71       );
 72       if (data.code === 200) {
 73         this.newPartyList = data.data;
 74         if (this.newPartyList && this.newPartyList.length > 0) {
 75           this.showNewPartyList = true;
 76           // 高亮搜索词
 77           this.newPartyList.map((item) => {
 78             item.orgFullName = this.brightKeyword(item.orgFullName);
 79           });
 80         } else {
 81           this.showNewPartyList = false;
 82         }
 83       }
 84     },
 85     brightKeyword(val) {
 86       const keyword = this.newParty;
 87       if (val.indexOf(keyword) > -1) {
 88         // replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
 89         return val.replace(keyword, `<span class="red">${keyword}</span>`);
 90       } else {
 91         return val;
 92       }
 93     },
 94     deleteBrightKeyword(val) {
 95       const keyword = this.newParty;
 96       if (val.indexOf(keyword) > -1) {
 97         // replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
 98         return val.replace(`<span class="red">${keyword}</span>`, keyword);
 99       } else {
100         return val;
101       }
102     },
103     selectNewParty(item) {
104       this.newParty = this.deleteBrightKeyword(item.orgFullName);
105       this.showNewPartyList = false;
106     },
107     onSubmit(values) {
108       console.log("submit", values);
109     },
110   },
111 };
112 </script>
113
114 <style lang="scss">
115 .label {
116   line-height: 0.8rem;
117   color: #646566;
118   font-size: 14px;
119   padding: 0 0.3rem;
120   .require {
121     color: #f00;
122     margin-right: 0.12rem;
123   }
124 }
125 .upload-box {
126   width: 6.86rem;
127   height: 0.9rem;
128   border: 1px dashed #f0443c;
129   margin-left: 0.3rem;
130   border-radius: 0.1rem;
131   margin-bottom: 0.3rem;
132   display: flex;
133   align-items: center;
134   justify-content: center;
135   .icon-upload {
136     display: inline-block;
137     width: 0.26rem;
138     height: 0.26rem;
139     background: url(../assets/img/icon-upload.png) no-repeat left top;
140     background-size: 100% 100%;
141     margin-right: 0.16rem;
142   }
143 }
144 .red {
145   color: #da2a2a;
146 }
147 </style>

参照：

https://blog.csdn.net/weixin_44980732/article/details/106326200（vue输入框使用模糊搜索）

https://blog.csdn.net/like_js/article/details/112535364（vue 搜索框模糊查询 + 优化(节流) + 关键字高亮）