前言

这个功能在网站中也很常见;下拉选择带搜索 基于之前的typeahead组件的基础上完善, 把过滤计算放在了computed ,其他逻辑也有所优化,代码更好理解

效果图

实现逻辑

• 和typeahead的实现大同小异,就是选择和传递数据的细节有所改善和重置默认值的思路有所变动
• indexOf的比对稍微加强了,字母默认全部小写,还有输入的值去除空格

整体来说比typeahead组件更好理解和阅读

你能学到什么?

• css样式
• 组件临时增加的状态的处理
• 数据过滤
• 一些常用按键的监听实现(ESC,up,down,Enter),失焦等..
• 过滤数据的默认选中

代码

• selectSearch.vue

    复制代码

总结

有更好的方案或者实现的可以往下留言,谢谢