自动补全插件有很多,比如jquery.typeahead.js,vue2.0中可以用element的组件库,vue1.0中目前还没发现好的组件库,就自己模仿写一个:
使用vue1.0脚手架。需要安装lodash,来处理搜索,一个完整的组件需要要有独立的事件,方法和功能,输入时根据输入的字符对数据源进行模糊检索,点击选择数据:
- 功能描述:
- 点击输入框,弹出下拉框,弹出source中的数据
- 选择下拉框中的数据,关闭下拉框
- 组件失去焦点,关闭下拉框(不是输入框失去焦点)
- 输入的中文转化为拼音首字母进行搜索
- 搜索排序还没解决...(js不知道怎么实现达到高效率,可以使用ajax,动态加载数据,排序问题交给后台)
- 组件参数:
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
source | Array | [] | 数据源,是一个对象数组 |
searchFields | String | '' | 搜索时搜索的字段,是一个逗号分割的字符串,格式 field1,field2,....field3 |
txtFields | String | '' | 选择时显示的字段,是一个逗号分割的字符串,格式 field1,field2,....field3 |
- 事件列表:
事件名称 | 参数 | 描述 |
---|---|---|
autoFocus | 组件获得焦点 | |
autoBlur | 组件失去焦点 | |
autoKeyup | 组件键盘事件 | |
autoClick | 组件单机事件 | |
autoDownDropOpen | 打开下拉框 | |
autoDownDropClose | 关闭下拉框 | |
autoSelected | 选择数据执行事件 | |
txtClick | 输入框单机事件 | |
txtFocus | 输入框获得焦点 | |
txtBlur | 输入框失去焦点 | |
txtKeyup | 输入框键盘事件 |
- 目录结构
Autocomplate
--auto-full.vue // 组件
--searchDate.js // 搜索接口
写的比较烂~~,后续在优化