我們在很多項目中使用了搜索功能來幫助用戶更快更準確的找到想要的信息。下面電腦高手網(wǎng)小編給大家摘錄一篇關于PHP結(jié)合jQuery.autocomplete插件實現(xiàn)輸入自動完成提示的功能介紹,有需要的小伙伴可以參考下,希望可以給正在學習PHP知識的朋友一些幫助或建議。本文將介紹如何實現(xiàn)用戶輸入自動提示的功能,就像谷歌百度搜索引擎一樣,當用戶輸入關鍵字時,輸入框下方會有提示,將與關鍵字相關的信息展現(xiàn)出來供用戶選擇,提升了用戶體驗。
本文將使用jquery ui的autocomplete插件,結(jié)合后端PHP,數(shù)據(jù)源通過PHP讀取mysql數(shù)據(jù)表的數(shù)據(jù)。

XHTML
首先將jquery庫和相關ui插件,以及css導入。
代碼如下:
jQuery ui 插件可以在官網(wǎng)上下載:
接著在body中寫一個輸入框:
代碼如下:
jQuery
代碼如下:
一看就明白,調(diào)用autocomplete插件,數(shù)據(jù)源來自search.php,當用戶輸入1個字符的時候就調(diào)用數(shù)據(jù)源。autocomplte插件提供了幾個可配置的參數(shù):
disabled:是否在頁面加載后不可用,默認為false,這個沒必要設置成true,沒有多大意義。
appendTo:輸入時下拉的提示框追加元素,默認為"body"。
autoFocus:默認為false,當設置成true時,下拉提示框第一個將會是被選中的狀態(tài)。
delay:加載數(shù)據(jù)時的延遲時間,默認為300,單位毫秒。
minLength:輸入多少個字符時就會出現(xiàn)下拉提示,默認為1。
position:定義下拉提示框的位置。
source:定義數(shù)據(jù)源,數(shù)據(jù)源必須是json形式的,本例是通過請求search.php獲取的數(shù)據(jù)源。
autocomplete還提供了許多事件和方法,詳情請查看其官網(wǎng):
PHP
調(diào)用了autocomplete插件后,還并沒有提示效果,別著急,因為需要調(diào)用數(shù)據(jù)源。
首先我們需要一張表,并要往表中添加適量數(shù)據(jù),表的結(jié)構(gòu)如下:
新聞熱點
疑難解答