自動(dòng)補(bǔ)全插件有很多性芬，比如jquery.typeahead.js庆冕，vue2.0中可以用element的組件庫(kù)询张，vue1.0中目前還沒(méi)發(fā)現(xiàn)好的組件庫(kù)，就自己模仿寫(xiě)一個(gè)：
使用vue1.0腳手架戒幔。需要安裝lodash，來(lái)處理搜索土童，一個(gè)完整的組件需要要有獨(dú)立的事件诗茎，方法和功能，輸入時(shí)根據(jù)輸入的字符對(duì)數(shù)據(jù)源進(jìn)行模糊檢索献汗，點(diǎn)擊選擇數(shù)據(jù)：
- 功能描述：
- 點(diǎn)擊輸入框敢订，彈出下拉框，彈出source中的數(shù)據(jù)
- 選擇下拉框中的數(shù)據(jù)罢吃，關(guān)閉下拉框
- 組件失去焦點(diǎn)楚午，關(guān)閉下拉框（不是輸入框失去焦點(diǎn)）
- 輸入的中文轉(zhuǎn)化為拼音首字母進(jìn)行搜索
- 搜索排序還沒(méi)解決...（js不知道怎么實(shí)現(xiàn)達(dá)到高效率，可以使用ajax尿招，動(dòng)態(tài)加載數(shù)據(jù)矾柜，排序問(wèn)題交給后臺(tái)）
- 組件參數(shù)：
| 名稱(chēng) | 類(lèi)型 | 默認(rèn) | 描述 |
|---|---|---|---|
| source | Array | [] | 數(shù)據(jù)源阱驾，是一個(gè)對(duì)象數(shù)組 |
| searchFields | String | '' | 搜索時(shí)搜索的字段，是一個(gè)逗號(hào)分割的字符串怪蔑，格式 field1,field2,....field3 |
| txtFields | String | '' | 選擇時(shí)顯示的字段里覆，是一個(gè)逗號(hào)分割的字符串，格式 field1,field2,....field3 |
- 事件列表：
| 事件名稱(chēng) | 參數(shù) | 描述 |
|---|---|---|
| autoFocus | 組件獲得焦點(diǎn) | |
| autoBlur | 組件失去焦點(diǎn) | |
| autoKeyup | 組件鍵盤(pán)事件 | |
| autoClick | 組件單機(jī)事件 | |
| autoDownDropOpen | 打開(kāi)下拉框 | |
| autoDownDropClose | 關(guān)閉下拉框 | |
| autoSelected | 選擇數(shù)據(jù)執(zhí)行事件 | |
| txtClick | 輸入框單機(jī)事件 | |
| txtFocus | 輸入框獲得焦點(diǎn) | |
| txtBlur | 輸入框失去焦點(diǎn) | |
| txtKeyup | 輸入框鍵盤(pán)事件 |
- 目錄結(jié)構(gòu)
Autocomplate
--auto-full.vue // 組件
--searchDate.js // 搜索接口
- 源碼地址缆瓣，上傳到碼云上了
https://git.oschina.net/zhangQMr/vue1.0-autocomplate.git
寫(xiě)的比較爛~~喧枷，后續(xù)在優(yōu)化
