這可以用作之前輸入過(guò)的內(nèi)容也可以用作自動(dòng)填充相關(guān)內(nèi)容，比如根據(jù)城市名，自動(dòng)填充郵編等。你可以使用本地?cái)?shù)據(jù)源或是遠(yuǎn)程數(shù)據(jù)源，本地?cái)?shù)據(jù)一般使用小數(shù)據(jù)集合，比如包含50條記錄的通訊錄，遠(yuǎn)程數(shù)據(jù)源一般為保護(hù)大量記錄的數(shù)據(jù)庫(kù)。

基本用法

本例為使用 AutoComplete 的基本用法，通過(guò)本地?cái)?shù)據(jù)源（數(shù)組）定義一組語(yǔ)言列表，用戶輸入字母后，包含該字母的語(yǔ)言會(huì)作為列表顯示出來(lái)：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>

    <script>
        $(function () {
            var availableTags = [
              "ActionScript",
              "AppleScript",
              "Asp",
              "BASIC",
              "C",
              "C++",
              "Clojure",
              "COBOL",
              "ColdFusion",
              "Erlang",
              "Fortran",
              "Groovy",
              "Haskell",
              "Java",
              "JavaScript",
              "Lisp",
              "Perl",
              "PHP",
              "Python",
              "Ruby",
              "Scala",
              "Scheme"
            ];
            $("#tags").autocomplete({
                source: availableTags
            });
        });
    </script>
</head>
<body>
    <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags" />
    </div>
</body>
</html>

http://wiki.jikexueyuan.com/project/jquery-tutorial/images/23.png" alt="" />

語(yǔ)調(diào)支持

某些語(yǔ)言支持語(yǔ)調(diào)字符，比如 J?rn 中的 ?，希望在輸入 o 時(shí)，也能顯示包含 ? 的內(nèi)容，AutoComplete 支持使用 function 來(lái)定義 Source 屬性：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>

    <script>
        $(function () {
            var names = ["J?rn Zaefferer",
                "Scott González",
                "John Resig"];

            var accentMap = {
                "á": "a",
                "?": "o"
            };
            var normalize = function (term) {
                var ret = "";
                for (var i = 0; i < term.length; i++) {
                    ret += accentMap[term.charAt(i)]
                        || term.charAt(i);
                }
                return ret;
            };

            $("#developer").autocomplete({
                source: function (request, response) {
                    var matcher
                        = new RegExp($.ui.autocomplete
                            .escapeRegex(request.term),"i");
                    response($.grep(names, function (value) {
                        value = value.label
                            || value.value
                            || value;
                        return matcher.test(value)
                            || matcher.test(normalize(value));
                    }));
                }
            });
        });
    </script>
</head>
<body>
    <div class="ui-widget">
        <form>
            <label for="developer">Developer: </label>
            <input id="developer" />
        </form>
    </div>
</body>
</html>

http://wiki.jikexueyuan.com/project/jquery-tutorial/images/24.png" alt="" />

分類支持

本例是提供簡(jiǎn)單擴(kuò)展 AutoComplete 組件實(shí)現(xiàn)了一個(gè)自定義的 custom.catcomplete UI 組件以支持AutoComplete 的分類支持。自定義組件有興趣的可以參見 jQuery 的 Widget Factory。一般無(wú)需自定義 UI 組件，如果需要，可以在網(wǎng)站查找是否有人已經(jīng)實(shí)現(xiàn)你需要的 UI 組件，實(shí)在不行才自定義 UI組件，使用 Widget Factory 自定義組件的方法并不十分直觀（這是因?yàn)?JavaScript 使用了面向“原型”的面向?qū)ο蠓椒?，而非通常的使用類的面向?qū)ο蠓椒ǎ?/p>

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>

    <style>
        .ui-autocomplete-category {
            font-weight: bold;
            padding: .2em .4em;
            margin: .8em 0 .2em;
            line-height: 1.5;
        }
    </style>
    <script>
        $.widget("custom.catcomplete", $.ui.autocomplete, {
            _renderMenu: function (ul, items) {
                var that = this,
                  currentCategory = "";
                $.each(items, function (index, item) {
                    if (item.category != currentCategory) {
                        ul.append("<li class='ui-autocomplete-category'>"
                            + item.category + "</li>");
                        currentCategory = item.category;
                    }
                    that._renderItemData(ul, item);
                });
            }
        });
    </script>
    <script>
        $(function () {
            var data = [
              { label: "anders", category: "" },
              { label: "andreas", category: "" },
              { label: "antal", category: "" },
              { label: "annhhx10", category: "Products" },
              { label: "annk K12", category: "Products" },
              { label: "annttop C13", category: "Products" },
              { label: "anders andersson", category: "People" },
              { label: "andreas andersson", category: "People" },
              { label: "andreas johnson", category: "People" }
            ];

            $("#search").catcomplete({
                delay: 0,
                source: data
            });
        });
    </script>
</head>
<body>
    <label for="search">Search: </label>
    <input id="search" />
</body>
</html>

其中 custom.catcomplete 為自定義的 UI 組件，因此 $( “#search” ).catcomplete 使用 catcomplete ，而非 autocomplete。

http://wiki.jikexueyuan.com/project/jquery-tutorial/images/25.png" alt="" />

上一篇：jQuery UI Button 示例（二）下一篇：回調(diào)函數(shù)

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

jQuery UI Autocomplete 示例（一）

基本用法

語(yǔ)調(diào)支持

分類支持