從手機app開始普遍使用以來牧抵，輸入框的自動提示就開始成為了一個比較熱門的實現(xiàn)功能模塊咐旧，大大節(jié)約了用戶的輸入時間窜司，增加了良好的體驗
用戶在輸入一個字符串的部分內(nèi)容時拉岁，就提供下拉菜單自動推薦相關(guān)常用字符串供用戶選擇以快速輸入的一項功能特性
以就是輸入框自動提示完成功能，如何結(jié)合我們的數(shù)據(jù)庫來實現(xiàn)
同樣也可以使用AJAX功能浦夷，以輸入的片段內(nèi)容辖试，向WebServer端獲取匹配篩選條件的字符串
在瀏覽器端，使用Web瀏覽器自帶的功能劈狐，經(jīng)由瀏覽器的窗體數(shù)據(jù)記憶功能罐孝，獲取匹配條件的字符串
目前大多現(xiàn)代網(wǎng)頁瀏覽器都已具備此功能
讓用戶不需要花費注意力、也不需要經(jīng)驗與專業(yè)知識即可直覺無誤完成正確的操作
“自動完成”的設(shè)計思路源自于Poka-yoka預(yù)防機制
如果我們自己去實現(xiàn)的話肥缔，還需要判斷瀏覽器等等操作莲兢，所以我使jquery已經(jīng)給我們封裝好的方法，就可以很方便快捷的實現(xiàn)了，接下來給大家來幾個例子
自動補全實現(xiàn)的基本思路改艇，類似于我們的模糊查詢收班，匹配我們類似的字段內(nèi)容，并把內(nèi)容加載到提示面板
比如jquery中就有一個很好的方法autocomplete谒兄，通過它我們可以很方便的實現(xiàn)輸入框的自動補全
如果針對于我們的web開發(fā)端來說摔桦，有很多組件以及框架已經(jīng)給了我們很多解決方案去實現(xiàn)
集成開發(fā)環(huán)境中，甚至我們自己寫的很長一串名字的方法名舵变，也可以給我們自動補全
比如linux下面可以使用tab就可以自動補全命令以及文件路徑
自動提示其實不單單是在web輸入框里可見酣溃，在我們常用的電子郵件軟件，集成環(huán)境編輯器纪隙，linux終端等等地方，都有發(fā)揮作用的地方
可以是一個靜態(tài)的數(shù)據(jù)源扛或，也可以是一個動態(tài)的绵咱，一般在我們的項目中都是動態(tài)，實時和數(shù)據(jù)后端交互的
然后就可以設(shè)置一個數(shù)據(jù)源供我們的調(diào)用
調(diào)用這么3個文件熙兔，就可以開心的玩了悲伶，文件可以在jq的官網(wǎng)下載
在jquery ui插件已經(jīng)給我們很方便的方法
小實例.jpg
source: availableTags
當然還需要一個id為autocomplete的輸入框來交互數(shù)據(jù)
小實例.jpg
像這樣的就得到了這樣一個效果，根據(jù)我們的輸入來加載相應(yīng)的數(shù)據(jù)
小實例.png
目錄文件結(jié)構(gòu)就這兩個文件住涉，index.html是就一個表單麸锉，search.php是對數(shù)據(jù)的操作，包括鏈接舆声，已經(jīng)查詢相應(yīng)的字段內(nèi)容
如果是后端數(shù)據(jù)來的數(shù)據(jù)呢花沉，我們應(yīng)該怎么操作呢？不急媳握，我們一起來看看
數(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ù)庫大概就這么個樣子柿赊，匹配查詢響應(yīng)的字段就可以了。
就實現(xiàn)了這么一個輸入自動提示幻枉，數(shù)據(jù)源來源于我們本地的數(shù)據(jù)庫
小實例.png
其實自動補全功能碰声，不單單這種方式去實現(xiàn)，還有很多方式很多好玩的組件展辞。大家慢慢的去挖掘吧奥邮。我近期在寫個小玩意，用到了，所以和大家分享下洽腺。如果你有什么好的建議或者是問題脚粟，你都可以發(fā)我或者發(fā)給赫赫美女，我都會整理回復(fù)蘸朋，明天將會整理demo分享給大家核无。今天的分享就到這里吧
小實例.png
小實例.jpg
