XHTML
首先將jquery庫和相關ui插件，以及css導入。一共引用三個 jquery ,jquery_ui.js,jquery-ui.css 三個文件,不同版本小哥可能稍有差異
(最后注意ajax請求的返回值的格式)
jQuery ui 插件可以在官網上下載：
接着在body中寫一個輸入框：
<input type="text" id="key" name="key" />
jQuery
$(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還提供了許多事件和方法，詳情請查看其官網：
PHP
調用了autocomplete插件后，還並沒有提示效果，別着急，因為需要調用數據源。
首先我們需要一張表，並要往表中添加適量數據，表的結構如下：
|
1
2
3
4
5
|
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形式輸出。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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":"\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，輸入后並不能提示，需要向前空格再退格才有提示。網上有很多同學給出了解決方案，但是目前最新的autocomplete插件代碼貌視進行了重構，我的解決方法是，在133行中加入如下代碼：
|
1
2
3
4
|
.bind(
"input.autocomplete"
,
function
(){
//修復FF不支持中文bug
self.search(self.item);
});
|
以上所述就是本文的全部內容了，希望大家能夠喜歡。