el-input 模糊查询

### 使用 `el-input` 组件实现模糊查询 为了使 Element UI 的 `el-input` 输入框能够支持模糊查询而不是仅限于首字符匹配，可以采用自定义过滤逻辑的方式。具体来说，在监听输入事件的同时动态更新下拉菜单的内容列表。 #### HTML 结构 通过组合使用 `<el-autocomplete>` 或者更灵活地利用 `<el-select>` 配合 `<el-option>` 来构建可选项目，并绑定相应的数据源： ```html <template> <div> <!-- 自动完成组件 --> <el-autocomplete v-model="state.query" :fetch-suggestions="querySearchAsync" placeholder="请输入内容"> </el-autocomplete> <!-- 下拉选择器方式 --> <el-select v-model="selectedItem" filterable remote reserve-keyword clearable placeholder="请选择或搜索"> <el-option v-for="(item, index) in filteredItems" :key="index" :label="item.label" :value="item.value"> </el-option> </el-select> </div> </template> ``` #### JavaScript 方法 对于自动补全功能而言，可以通过设置 `fetch-suggestions` 属性来指定一个异步函数用于获取建议列表；而对于带有远程搜索特性的下拉框，则需处理好本地状态管理以及筛选规则的应用： ```javascript <script setup> import { ref } from 'vue'; const state = reactive({ query: '' }); // 假设这是从服务器端获得的数据集 let restaurants = [ {"value":"三全鲜食(北新泾店)","address":"上海市长宁区新渔路144号"}, {"value":"Hot honey虾堡","address":"上海市普陀区真北路988号创邑金沙谷6号楼113"} ]; function querySearchAsync(queryString, cb){ let results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants; clearTimeout(timeout); timeout = setTimeout(() => { cb(results); }, 300 * Math.random()); } function createFilter(queryString){ return (restaurant) => restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1; } </script> ``` 上述代码片段展示了两种不同的方法来达到模糊查询的效果——一种是基于 `el-autocomplete` 的即时反馈机制[^1]，另一种则是借助 `el-select` 提供的内置特性并配合外部控制其可见选项集合[^2]。