亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

PHP結(jié)合jQuery.autocomplete插件實(shí)現(xiàn)輸入自動完成提示的功能

 更新時間：2015年04月27日 15:01:24   投稿：hebedich  
本文將使用jquery ui的autocomplete插件，結(jié)合后端PHP，數(shù)據(jù)源通過PHP讀取mysql數(shù)據(jù)表的數(shù)據(jù),有需要的朋友可以參考一下。

我們在很多項(xiàng)目中使用了搜索功能來幫助用戶更快更準(zhǔn)確的找到想要的信息。本文將介紹如何實(shí)現(xiàn)用戶輸入自動提示的功能，就像谷歌百度搜索引擎一樣，當(dāng)用戶輸入關(guān)鍵字時，輸入框下方會有提示，將與關(guān)鍵字相關(guān)的信息展現(xiàn)出來供用戶選擇，提升了用戶體驗(yàn)。

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

XHTML

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

復(fù)制代碼 代碼如下:

<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)上下載：
接著在body中寫一個輸入框：

復(fù)制代碼 代碼如下:

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

jQuery

復(fù)制代碼 代碼如下:

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

一看就明白，調(diào)用autocomplete插件，數(shù)據(jù)源來自search.php，當(dāng)用戶輸入1個字符的時候就調(diào)用數(shù)據(jù)源。autocomplte插件提供了幾個可配置的參數(shù)：
disabled：是否在頁面加載后不可用，默認(rèn)為false，這個沒必要設(shè)置成true，沒有多大意義。
appendTo：輸入時下拉的提示框追加元素，默認(rèn)為"body"。
autoFocus：默認(rèn)為false，當(dāng)設(shè)置成true時，下拉提示框第一個將會是被選中的狀態(tài)。
delay：加載數(shù)據(jù)時的延遲時間，默認(rèn)為300，單位毫秒。
minLength：輸入多少個字符時就會出現(xiàn)下拉提示，默認(rèn)為1。
position：定義下拉提示框的位置。
source：定義數(shù)據(jù)源，數(shù)據(jù)源必須是json形式的，本例是通過請求search.php獲取的數(shù)據(jù)源。
autocomplete還提供了許多事件和方法，詳情請查看其官網(wǎng)：

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 ;

 
請自行建表，并往表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ù)格式為：

復(fù)制代碼 代碼如下:

[{"id":"3","title":"\u4f7f\u7528CSS\u548cjQuery\u5236\u4f5c\u6f02\u4eae\u7684\u4e0b
\u62c9\u9009\u9879\u83dc\u5355"},
{"id":"4","title":"\u4f7f\u7528jQuery\u548cCSS\u63a7\u5236\u9875\u9762\u6253\u5370
\u533a\u57df"}]

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

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

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

相關(guān)文章

最新評論