怎么用jQuery+PHP+Mysql實(shí)現(xiàn)輸入自動(dòng)完成提示的功能

本篇內(nèi)容介紹了“怎么用jQuery+PHP+Mysql實(shí)現(xiàn)輸入自動(dòng)完成提示的功能”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

本文將使用jquery ui的autocomplete插件，結(jié)合后端PHP，數(shù)據(jù)源通過PHP讀取mysql數(shù)據(jù)表的數(shù)據(jù)。

XHTML

首先將jquery庫和相關(guān)ui插件，以及css導(dǎo)入。

<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 插件可以在官網(wǎng)上下載：www.jqueryui.com

接著在body中寫一個(gè)輸入框：

<input type="text" id="key" name="key" />

jQuery

$(function(){ $("#key").autocomplete({ source: "search.php", minLength: 2 }); });

一看就明白，調(diào)用autocomplete插件，數(shù)據(jù)源來自search.php，當(dāng)用戶輸入1個(gè)字符的時(shí)候就調(diào)用數(shù)據(jù)源。autocomplte插件提供了幾個(gè)可配置的參數(shù)：

disabled：是否在頁面加載后不可用，默認(rèn)為false，這個(gè)沒必要設(shè)置成true，沒有多大意義。

appendTo：輸入時(shí)下拉的提示框追加元素，默認(rèn)為"body"。

autoFocus：默認(rèn)為false，當(dāng)設(shè)置成true時(shí)，下拉提示框第一個(gè)將會(huì)是被選中的狀態(tài)。

delay：加載數(shù)據(jù)時(shí)的延遲時(shí)間，默認(rèn)為300，單位毫秒。

minLength：輸入多少個(gè)字符時(shí)就會(huì)出現(xiàn)下拉提示，默認(rèn)為1。

position：定義下拉提示框的位置。

source：定義數(shù)據(jù)源，數(shù)據(jù)源必須是json形式的，本例是通過請(qǐng)求search.php獲取的數(shù)據(jù)源。

autocomplete還提供了許多事件和方法，詳情請(qǐng)查看其官網(wǎng)：http://jqueryui.com/demos/autocomplete

PHP

調(diào)用了autocomplete插件后，還并沒有提示效果，別著急，因?yàn)樾枰{(diào)用數(shù)據(jù)源。

首先我們需要一張表，并要往表中添加適量數(shù)據(jù)，表的結(jié)構(gòu)如下：

CREATE TABLE `art` (  `id` int(11) NOT NULL auto_increment,  `title` varchar(100) NOT NULL,  PRIMARY KEY  (`id`) ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 ;

請(qǐng)自行建表，并往表art中添加數(shù)據(jù)。

search.php實(shí)現(xiàn)了連接Mysql數(shù)據(jù)庫，并根據(jù)前端用戶的輸入，查詢并獲取數(shù)據(jù)表中相匹配的內(nèi)容，然后以JSON形式輸出。

include_once("connect.php"); //連接數(shù)據(jù)庫 $q = strtolower($_GET["term"]); //獲取用戶輸入的內(nèi)容 $query=mysql_query("select * from art where title like '$q%' limit 0,10"); //查詢數(shù)據(jù)庫，并將結(jié)果集組成數(shù)組 while ($row=mysql_fetch_array($query)) { $result[] = array( 'id' => $row['id'], 'label' => $row['title'] ); } echo json_encode($result);  //輸出JSON數(shù)據(jù)

最后輸出的JSON數(shù)據(jù)格式為：

[{"id":"3","title":"u4f7fu7528CSSu548cjQueryu5236u4f5cu6f02u4eaeu7684u4e0b u62c9u9009u9879u83dcu5355"}, {"id":"4","title":"u4f7fu7528jQueryu548cCSSu63a7u5236u9875u9762u6253u5370 u533au57df"}]

這時(shí)，再測試下輸入，是不是看到你要的效果了呢？

最后，值得一提的是，autocomplete插件在firefox上有一個(gè)輸入BUG，輸入后并不能提示，需要向前空格再退格才有提示。網(wǎng)上有很多同學(xué)給出了解決方案，但是目前最新的autocomplete插件代碼貌視進(jìn)行了重構(gòu)，我的解決方法是，在133行中加入如下代碼：

.bind("input.autocomplete",function(){ //修復(fù)FF不支持中文bug self.search(self.item); });

“怎么用jQuery+PHP+Mysql實(shí)現(xiàn)輸入自動(dòng)完成提示的功能”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！