jQuery UI 1.8版本新增瞭2個非常有用的控件：一個是Button，其作用是自定義頁面按鈕的樣式；另一個就是Autocomplete，其作用是使文本框具有類似百度、谷歌輸入框那種自動填充的能力。
Autocomplete的函數原型如下：
[javascript]
$(selector).autocomplete({
source: [], // 自動填充的備選數據，註1
position: {my: "left top", at: "left bottom"}, // 下拉列表相對於文本框的位置，註2
minLength: 1, // 自動填充被激活前需要輸入的最小字符數，默認為1
delay: 300, // 停止輸入到自動填充被激活的延遲時間，默認為300
autoFocus: false, // 是否自動聚焦於下拉列表第一項，默認為false
appendTo: "body", // 自動填充的下拉列表放到哪個元素內部，註3
disabled: false, // 是否禁用自動填充，默認為false
create: function(event, ui) {}, // 自動填充被創建時被觸發
search: function(event, ui) {}, // 在達到最小輸入字符數並且延遲時間結束之後，自動填充數據請求開始之前被觸發
open: function(event, ui) {}, // 下拉列表打開時被觸發
focus: function(event, ui) {}, // 下拉列表項被聚焦時觸發，ui.item對應被聚焦的列表項
select: function(event, ui) {}, // 下拉列表項被選擇時觸發，ui.item對應被選擇的列表項
close: function(event, ui) {}, // 下拉列表隱藏時被觸發
change: function(event, ui) {} // 文本域的值發生改變時被觸發，ui.item對應新的被選擇的列表項
});
其中，Autocomplete作用的元素一般是<input type=”text”>或者<textarea>這些帶輸入框的標簽。
註釋：
註1，source是Autocomplete核心屬性，表示自動填充時所需的備選數據集合，必填，其它的屬性和事件都是非必需的。
source的可選值有三種類型：
一是Array型，可以是形如[“Java”, “JavaScript”, “CSS”, “jQuery”, “PHP”, “HTML”] 的一元字符串數組，也可以是形如 {{label: “choice1”, value: “value1”}, {label: “choice2”, value: “value2”},…} 的二元字符串數組。
二是String型，表示能返回形如上述兩種數組格式的JSON數據的URL鏈接。
三是function型，其函數原型是function(request, response) ，其中：參數request表示數據請求，它隻有唯一的屬性term，request.term表示當前文本框中的輸入值；參數response表示數據響應，它是一個已經定義好的回調函數，需要在本function的函數體中傳入參數作為調用，response的參數必須是符合前述兩種數組格式的數組數據。
註2， position表示的是下拉菜單相對於文本輸入框的位置，其格式符合jQuery UI Position規則。通常來說隻用到my和at兩個索引，即形如{my: "left top", at: "left bottom"}。其中my表示下拉菜單，my: “lefttop” 表示下拉菜單的左上角；at表示在輸入框的什麼位置，at: “left bottom” 表示在輸入框的左下角。
註3，appendTo表示數據響應時出現的下拉列表是被添加到哪個元素的內部，其值是滿足jQuery選擇器的字符串，如”#id”、”.class” 等。默認為”body”，即<body>元素的jQuery對象。不過通常這個元素無需設置，使用默認值即可。
另外，Autocomplete的7個可選事件的參數都是event和ui：event表示事件對象，與其它諸如click、select等事件中的event差別不大；ui表示的是下拉列表這種控件的DOM對象，ui.item表示列表項，ui.item.value表示列表項的值，基本隻在focus、select、change事件中會被用到。
下面的代碼結合Autocomplete和Ajax模擬瞭一個異步查詢姓名的自動填充輸入域：
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Autocomplete</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#auto").autocomplete({
source: function(request, response) {
$.ajax({
url: "http://localhost/phptest/index.php",
data: {
name: request.term
},
dataType: "json",
success: function(data, textStatus, jqXHR) {
response($.map(data, function(item, index) {
return item.name;
}));
}
});
},
delay: 600,
select: function(event, ui) {
$(".result").remove();
$("#auto").before("<p class='result'></p>");
$(".result").html(ui.item.value);
}
});
});
</script>
</head>
<body>
<input type="text" id="auto" />
</body>
</html>
其中Ajax的url：http://localhost/phptest/index.php是本地一個返回json格式的姓名數組的測試文件。
需要註意的是按照jQuery UI的格式，需要導入三個文件，即：
[html]
<link type="text/css"href="css/ui-lightness/jquery-ui-1.8.18.custom.css"rel="stylesheet" />
<script type="text/javascript"src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript"src="js/jquery-ui-1.8.18.custom.min.js"></script>
另外代碼中用到的$.map 函數也是一個很有用的數組生成/裝配函數。
作者 sadfishsc