el-autocomplete搜索
时间: 2023-11-05 13:54:18 浏览: 45
el-autocomplete是一个用于搜索的自动完成组件。根据提供的引用内容,你可以使用v-model属性来绑定搜索框的值,使用:fetch-suggestions属性来指定搜索建议的来源,使用placeholder属性来设置搜索框的占位符,使用prefix-icon属性来设置搜索框的前缀图标,使用@select事件来处理选中建议项的操作。
如果你想设置el-autocomplete的默认值,可以使用value-key属性来指定默认值的字段名。通过将value-key设置为"house_name",你可以将默认值设置为你想要的值。
相关问题
el-el-autocomplete
el-autocomplete是Vue框架中的一个组件,用于实现输入框自动匹配相关内容的功能。它是autocomplete组件的一个分支,专门处理模糊匹配的知识。通过输入内容后,el-autocomplete会显示一个提示列表,根据用户输入的内容进行匹配并显示相关的选项。 这个组件可以用于实现类似百度搜索框的功能,用户只需要输入一个单词就可以自动匹配到相关内容。 详细的实现原理和使用方法可以参考Vue官方文档提供的相关介绍。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [el-autocomplete使用详解](https://blog.csdn.net/weixin_57631344/article/details/125308086)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [基于Vue el-autocomplete 实现类似百度搜索框功能](https://download.csdn.net/download/weixin_38733885/12933395)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [【element】el-autocomplete的常见用法](https://blog.csdn.net/qq_41443611/article/details/124320151)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
el-autocomplete 模糊搜索
el-autocomplete是饿了么框架中的一个组件,可以实现模糊搜索功能。具体实现的思路方式要和后端商量,但一般来说,前端需要将用户在输入框中输入的关键词发送给后端,后端再根据这个关键词进行模糊查询,将查询结果返回给前端展示出来。
关于el-autocomplete的模糊搜索实现,可以参考以下步骤:
. 创建一个方法,比如createFilter,该方法接收一个参数queryString,表示用户输入的关键词。
2. 在该方法中,使用toLowerCase()方法将queryString和restaurant.value都转换为小写字母,以便进行大小写不敏感的比较。
3. 使用indexOf()方法,判断restaurant.value是否包含queryString。如果包含,返回true,否则返回false。
4. 根据需求,可以对原有的createFilter方法进行修改,比如将索引匹配的判断条件从索引为0的位置改为包含关系,即将===改为!==。
5. 将修改后的createFilter方法应用到el-autocomplete组件中的filter-method属性中,以实现模糊搜索的效果。