本篇內容介紹了“怎么用jQuery+PHP+Mysql實現輸入自動完成提示的功能”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
本文將使用jquery ui的autocomplete插件，結合后端PHP，數據源通過PHP讀取mysql數據表的數據。
首先將jquery庫和相關ui插件，以及css導入。
<link rel="stylesheet" href="jquery.ui.autocomplete.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="ui/jquery.ui.autocomplete.js"></script>
jQuery ui 插件可以在官網上下載：www.jqueryui.com
接著在body中寫一個輸入框：
<input type="text" id="key" name="key" />
$(function(){
$("#key").autocomplete({
source: "search.php",
minLength: 2
});
});
一看就明白，調用autocomplete插件，數據源來自search.php，當用戶輸入1個字符的時候就調用數據源。autocomplte插件提供了幾個可配置的參數：
disabled：是否在頁面加載后不可用，默認為false，這個沒必要設置成true，沒有多大意義。
appendTo：輸入時下拉的提示框追加元素，默認為"body"。
autoFocus：默認為false，當設置成true時，下拉提示框第一個將會是被選中的狀態。
delay：加載數據時的延遲時間，默認為300，單位毫秒。
minLength：輸入多少個字符時就會出現下拉提示，默認為1。
position：定義下拉提示框的位置。
source：定義數據源，數據源必須是json形式的，本例是通過請求search.php獲取的數據源。
autocomplete還提供了許多事件和方法，詳情請查看其官網：http://jqueryui.com/demos/autocomplete
調用了autocomplete插件后，還并沒有提示效果，別著急，因為需要調用數據源。
首先我們需要一張表，并要往表中添加適量數據，表的結構如下：
CREATE TABLE `art` (
`id` int(11) NOT NULL auto_increment,
`title` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 ;
請自行建表，并往表art中添加數據。
search.php實現了連接Mysql數據庫，并根據前端用戶的輸入，查詢并獲取數據表中相匹配的內容，然后以JSON形式輸出。
include_once("connect.php"); //連接數據庫
$q = strtolower($_GET["term"]); //獲取用戶輸入的內容
$query=mysql_query("select * from art where title like '$q%' limit 0,10");
//查詢數據庫，并將結果集組成數組
while ($row=mysql_fetch_array($query)) {
$result[] = array(
'id' => $row['id'],
'label' => $row['title']
);
}
echo json_encode($result); //輸出JSON數據
最后輸出的JSON數據格式為：
[{"id":"3","title":"u4f7fu7528CSSu548cjQueryu5236u4f5cu6f02u4eaeu7684u4e0b
u62c9u9009u9879u83dcu5355"},
{"id":"4","title":"u4f7fu7528jQueryu548cCSSu63a7u5236u9875u9762u6253u5370
u533au57df"}]
這時，再測試下輸入，是不是看到你要的效果了呢？
最后，值得一提的是，autocomplete插件在firefox上有一個輸入BUG，輸入后并不能提示，需要向前空格再退格才有提示。網上有很多同學給出了解決方案，但是目前最新的autocomplete插件代碼貌視進行了重構，我的解決方法是，在133行中加入如下代碼：
.bind("input.autocomplete",function(){
//修復FF不支持中文bug
self.search(self.item);
});
“怎么用jQuery+PHP+Mysql實現輸入自動完成提示的功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
