|
jQuery UI 1.8版本新增了2個非常有用的控件：一個是Button，其作用是自定義頁面按鈕的樣式；另一個就是Autocomplete，其作用是使文本框具有類似百度、谷歌輸入框那種自動填充的能力。
Autocomplete的函數(shù)原型如下：
$(selector).autocomplete({
source: [], // 自動填充的備選數(shù)據(jù)，注1
position: {my: "left top", at: "left bottom"}, // 下拉列表相對于文本框的位置，注2
minLength: 1, // 自動填充被激活前需要輸入的最小字符數(shù)，默認(rèn)為1
delay: 300, // 停止輸入到自動填充被激活的延遲時間，默認(rèn)為300
autoFocus: false, // 是否自動聚焦于下拉列表第一項，默認(rèn)為false
appendTo: "body", // 自動填充的下拉列表放到哪個元素內(nèi)部，注3
disabled: false, // 是否禁用自動填充，默認(rèn)為false
create: function(event, ui) {}, // 自動填充被創(chuàng)建時被觸發(fā)
search: function(event, ui) {}, // 在達(dá)到最小輸入字符數(shù)并且延遲時間結(jié)束之后，自動填充數(shù)據(jù)請求開始之前被觸發(fā)
open: function(event, ui) {}, // 下拉列表打開時被觸發(fā)
focus: function(event, ui) {}, // 下拉列表項被聚焦時觸發(fā)，ui.item對應(yīng)被聚焦的列表項
select: function(event, ui) {}, // 下拉列表項被選擇時觸發(fā)，ui.item對應(yīng)被選擇的列表項
close: function(event, ui) {}, // 下拉列表隱藏時被觸發(fā)
change: function(event, ui) {} // 文本域的值發(fā)生改變時被觸發(fā)，ui.item對應(yīng)新的被選擇的列表項
});
其中，Autocomplete作用的元素一般是<input type=”text”>或者<textarea>這些帶輸入框的標(biāo)簽。 注釋： 注1，source是Autocomplete核心屬性，表示自動填充時所需的備選數(shù)據(jù)集合，必填，其它的屬性和事件都是非必需的。 source的可選值有三種類型： 一是Array型，可以是形如[“Java”, “JavaScript”, “CSS”, “jQuery”, “PHP”, “HTML”] 的一元字符串?dāng)?shù)組，也可以是形如 {{label: “choice1”, value: “value1”}, {label: “choice2”, value: “value2”},…} 的二元字符串?dāng)?shù)組。 二是String型，表示能返回形如上述兩種數(shù)組格式的JSON數(shù)據(jù)的URL鏈接。 三是function型，其函數(shù)原型是function(request, response) ，其中：參數(shù)request表示數(shù)據(jù)請求，它只有唯一的屬性term，request.term表示當(dāng)前文本框中的輸入值；參數(shù)response表示數(shù)據(jù)響應(yīng)，它是一個已經(jīng)定義好的回調(diào)函數(shù)，需要在本function的函數(shù)體中傳入?yún)?shù)作為調(diào)用，response的參數(shù)必須是符合前述兩種數(shù)組格式的數(shù)組數(shù)據(jù)。 注2， position表示的是下拉菜單相對于文本輸入框的位置，其格式符合jQuery UI Position規(guī)則。通常來說只用到my和at兩個索引，即形如{my: "left top", at: "left bottom"}。其中my表示下拉菜單，my: “l(fā)efttop” 表示下拉菜單的左上角；at表示在輸入框的什么位置，at: “l(fā)eft bottom” 表示在輸入框的左下角。 注3，appendTo表示數(shù)據(jù)響應(yīng)時出現(xiàn)的下拉列表是被添加到哪個元素的內(nèi)部，其值是滿足jQuery選擇器的字符串，如”#id”、”.class” 等。默認(rèn)為”body”，即<body>元素的jQuery對象。不過通常這個元素?zé)o需設(shè)置，使用默認(rèn)值即可。 另外，Autocomplete的7個可選事件的參數(shù)都是event和ui：event表示事件對象，與其它諸如click、select等事件中的event差別不大；ui表示的是下拉列表這種控件的DOM對象，ui.item表示列表項，ui.item.value表示列表項的值，基本只在focus、select、change事件中會被用到。
下面的代碼結(jié)合Autocomplete和Ajax模擬了一個異步查詢姓名的自動填充輸入域：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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("<div class='result'></div>");
$(".result").html(ui.item.value);
}
});
});
</script>
</head>
<body>
<input type="text" id="auto" />
</body>
</html>
其中Ajax的url：http://localhost/phptest/index.php是本地一個返回json格式的姓名數(shù)組的測試文件。 需要注意的是按照jQuery UI的格式，需要導(dǎo)入三個文件，即：
<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 函數(shù)也是一個很有用的數(shù)組生成/裝配函數(shù)。 |
|
|
