jQuery UI Autocomplete类似百度、谷歌输入框的自动填充文本域

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("<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的格式，需要导入三个文件，即：

[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

补充：web前端 , JavaScript ,