從手機app開始普遍使用以來，輸入框的自動提示就開始成為了一個比較熱門的實現(xiàn)功能模塊，大大節(jié)約了用戶的輸入時間，增加了良好的體驗
用戶在輸入一個字符串的部分內容時，就提供下拉菜單自動推薦相關常用字符串供用戶選擇以快速輸入的一項功能特性
以就是輸入框自動提示完成功能，如何結合我們的數(shù)據(jù)庫來實現(xiàn)
同樣也可以使用AJAX功能，以輸入的片段內容，向WebServer端獲取匹配篩選條件的字符串
在瀏覽器端，使用Web瀏覽器自帶的功能，經由瀏覽器的窗體數(shù)據(jù)記憶功能，獲取匹配條件的字符串
目前大多現(xiàn)代網頁瀏覽器都已具備此功能
讓用戶不需要花費注意力、也不需要經驗與專業(yè)知識即可直覺無誤完成正確的操作
“自動完成”的設計思路源自于Poka-yoka預防機制
如果我們自己去實現(xiàn)的話，還需要判斷瀏覽器等等操作，所以我使jquery已經給我們封裝好的方法，就可以很方便快捷的實現(xiàn)了，接下來給大家來幾個例子
自動補全實現(xiàn)的基本思路，類似于我們的模糊查詢，匹配我們類似的字段內容，并把內容加載到提示面板
比如jquery中就有一個很好的方法autocomplete，通過它我們可以很方便的實現(xiàn)輸入框的自動補全
如果針對于我們的web開發(fā)端來說，有很多組件以及框架已經給了我們很多解決方案去實現(xiàn)
集成開發(fā)環(huán)境中，甚至我們自己寫的很長一串名字的方法名，也可以給我們自動補全
比如linux下面可以使用tab就可以自動補全命令以及文件路徑
自動提示其實不單單是在web輸入框里可見，在我們常用的電子郵件軟件，集成環(huán)境編輯器，linux終端等等地方，都有發(fā)揮作用的地方
可以是一個靜態(tài)的數(shù)據(jù)源，也可以是一個動態(tài)的，一般在我們的項目中都是動態(tài)，實時和數(shù)據(jù)后端交互的
然后就可以設置一個數(shù)據(jù)源供我們的調用
調用這么3個文件，就可以開心的玩了，文件可以在jq的官網下載
在jquery ui插件已經給我們很方便的方法
小實例.jpg
source: availableTags
當然還需要一個id為autocomplete的輸入框來交互數(shù)據(jù)
小實例.jpg
像這樣的就得到了這樣一個效果，根據(jù)我們的輸入來加載相應的數(shù)據(jù)
小實例.png
目錄文件結構就這兩個文件，index.html是就一個表單，search.php是對數(shù)據(jù)的操作，包括鏈接，已經查詢相應的字段內容
如果是后端數(shù)據(jù)來的數(shù)據(jù)呢，我們應該怎么操作呢？不急，我們一起來看看
數(shù)據(jù)源，可以我們是js數(shù)組，也可以是json對象，也可以是xml序列化格式數(shù)據(jù)
小實例.png
這里的minLength是要求我們必須有一個字符
接著修改一下數(shù)據(jù)源
同樣在index.html引入我們剛剛引入的那3個文件
小實例.jpg
echo json_encode($return_arr);這樣index.html就可以接收到數(shù)據(jù)了
search.php中，數(shù)據(jù)庫的鏈接采用的是pdo的方式，上圖是進行匹配查詢，并且遍歷我們的數(shù)據(jù)集
小實例.jpg
小實例.png
數(shù)據(jù)庫大概就這么個樣子，匹配查詢響應的字段就可以了。
就實現(xiàn)了這么一個輸入自動提示，數(shù)據(jù)源來源于我們本地的數(shù)據(jù)庫
小實例.png
其實自動補全功能，不單單這種方式去實現(xiàn)，還有很多方式很多好玩的組件。大家慢慢的去挖掘吧。我近期在寫個小玩意，用到了，所以和大家分享下。如果你有什么好的建議或者是問題，你都可以發(fā)我或者發(fā)給赫赫美女，我都會整理回復，明天將會整理demo分享給大家。今天的分享就到這里吧
小實例.png
小實例.jpg
