本文共 897 字，大约阅读时间需要 2 分钟。

饿了么框架中如何实现输入框搜索功能

一、输入框失去焦点后触发搜索

输入框可以通过@blur事件监听输入框失去焦点时触发搜索功能。在 Vue 项目中，简单示例如下：

validateCounts方法在输入框失去焦点时会被调用：

methods: {  validateCounts() {    console.log('查找') // 输入框失去焦点触发搜索  }}

二、每输入一个字符触发搜索

可以在输入事件中绑定实时搜索功能。使用 @input事件绑定：

validateCounts 方法将接收最新输入值：

methods: {  validateCounts(input) {    console.log('查找') // 输入改变时触发搜索    // 可以根据输入处理逻辑进行扩展  }}

三、按回车键触发搜索

需要在键盘按压事件中判断是否是回车键。通过监听 keydown 事件：

在 validateCounts 方法中判断回车键：

methods: {  validateCounts(e) {    const keyCode = e.keyCode || e.charCode;    if (keyCode === 13) {      console.log('查找') // 按下回车键触发搜索    }  }}

以上方案可根据实际需求灵活配置。优化建议：在 validateCounts 方法中增加参数传递，根据不同需求做相应处理。比如：

methods: {  validateCounts(input, isEnter = false) {    if (isEnter) {      //afx: 仅当按回车时调用      console.log('按回车触发');    } else {      console.log('输入变化或失去焦点触发');    }    // 根据输入内容发 Regions API 调用或其他业务逻辑  }}

注意事项：请确保 el-input 组件的版本支持以上语法，正常情况下现支持所有功能。