uniapp 官方扩展组件 uni-combox 实现:只能选择不能手写(输入中支持过滤显示下拉列表)
- uni-combox
- uni-combox 原本支持:
- 问题:
 
- 改造源码
- 参考资料
uni-combox
 
 
uni-combox 原本支持:
- 下拉选择。
- 输入关键字,下拉列表自动过滤显示相关
- 可以手动输入下,下拉列表中不存在的内容。
问题:
我的需求是不能让用户手输入,只允许选择。
 可能有人会说那不如直接使用 uni-data-select ,但是这个又不支持输入京时,自动过滤只显示包含京的选项。
 所以只能自己改造一下了。
改造源码

- 在 data中添加oldVal用于保存初始值,在选择无效值时用于回填。
- 在 watch中如果没有值就初始化oldVal。如果在mounted初始化,万一uni-combox被多次封装,就有可能拿不到值。
- 在 onFocus添加this.inputVal = '';实现每次点开下拉列表都能显示所有值。(默认因为已选的值起到过滤的作用,下拉列表将不再有其他内容)
  
- onBlur添加逻辑判断,如果失去焦点时输入框中的值不是从下拉列表中选的就用- oldVal覆盖它。
if(!this.filterCandidates.some(s=>s===this.inputVal)){ this.inputVal = this.oldVal;
}
参考资料
组件名:uni-combox