|
jQuery UI 1.8版本新增了2个非常有用的控件：一个是Button，其作用是自定义页面按钮的样式；另一个就是Autocomplete，其作用是使文本框具有类似百度、谷歌输入框那种自动填充的能力。
Autocomplete的函数原型如下：
$(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模拟了一个异步查询姓名的自动填充输入域：
<!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格式的姓名数组的测试文件。 需要注意的是按照jQuery UI的格式，需要导入三个文件，即：
<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 函数也是一个很有用的数组生成/装配函数。 |
|
|
来自： 昵称12294608 > 《js学习类》
