el-autocomplete高亮

### 关于 `el-autocomplete` 接口文档及其使用方法 #### 基本介绍 `el-autocomplete` 是 Element UI 提供的一种带有自动完成功能的输入框组件，适用于需要提供输入提示的应用场景。此组件能够根据用户的输入动态展示可能的选择列表，帮助用户更加快速准确地完成输入操作[^1]。 #### 属性配置 对于 `el-autocomplete` 的具体属性设置，在官方文档中有详细的说明。例如： - **v-model**: 双向绑定当前输入框的内容。 - **fetch-suggestions**: 自定义获取建议的方法，参数是一个回调函数，接收两个参数 `(queryString, cb)` ，其中 `cb` 需要传入一个数组作为返回值给组件处理并显示出来。 - **placeholder**: 设置占位符文本。 - **trigger-on-focus**: 是否在获得焦点时触发请求，默认为 true。 - **popper-append-to-body**: 控制下拉菜单是否插入至 body 元素上，默认为 true；当设为 false 时，则会将弹层放置在其父节点之下[^3]。 ```html <el-autocomplete v-model="state" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"> </el-autocomplete> ``` #### 实现防抖机制 为了避免频繁输入导致过多不必要的网络请求或者计算资源浪费，可以在调用 `fetch-suggestions` 方法前加入简单的防抖逻辑。这可以通过 JavaScript 中常见的 debounce 函数实现，也可以利用 lodash 库中的同名工具函数简化编码过程。 ```javascript import _ from 'lodash'; // 创建debounce版本的查询函数 const debouncedQuerySearch = _.debounce((queryString, cb) => { // 执行实际的数据检索工作... }, 500); export default { methods: { querySearch(queryString, cb) { debouncedQuerySearch(queryString, cb); } } } ``` #### 处理模糊匹配与高亮显示 为了让用户体验更好，还可以对搜索结果进行部分字符串匹配，并且支持关键词高亮效果。这里可以自定义插槽来定制化每项的结果呈现方式，比如下面的例子展示了如何突出显示符合条件的部分文字[^2]。 ```vue <template> <el-autocomplete v-model="state" :fetch-suggestions="querySearch" placeholder="请输入" trigger-on-focus> <template slot-scope="{ item }"> <span v-html="highlightMatch(item.value, state)"></span> </template> </el-autocomplete> </template> <script> methods: { highlightMatch(text, keyword){ const regExp = new RegExp(`(${keyword})`, 'gi'); return text.replace(regExp, '<strong>$1</strong>'); }, ... } </script> ```

el-autocomplete失去焦点后，可以通过给input元素添加blur事件来清空上一次的搜索记录。在blur事件的处理函数中，可以将搜索建议列表清空，并将高亮索引重置为-1，以达到清空搜索记录的效果。 需要注意的是，直接使用blur来清空搜索记录的话，对于模糊搜索来说，将无法选中搜索出来的数据。如果需要保留模糊搜索的功能，可以尝试使用其他方法来处理。 参考文献： : 图二：第二次再进来就会直接出来上一次的搜索记录 **解决办法：**我看网上解决办法很少。有个博主写的这种办法加blur，在失去焦点的时候清空上一次搜索记录 //清空上次搜索记录 handleBlur(val){ // moduleName moduleNumber className classNumber // console.log(val) this.$refs[val].suggestions = []; this.$refs[val].highlightedIndex = -1; }, : ！！！！！注意的是直接加blur的时候，确实是清空上一次的搜索记录了，但是对于模糊搜索，是没办法选中搜索出来的数据了****详见我已上传的视频 : **描述：**点击新增弹窗，模糊搜索如果没选择，直接关闭或者取消的话，再次点击弹窗进来会保留上次的搜索记录