JqueryAutoComplete使用demo资源-CSDN文库

共23个文件

png：14个

js：4个

ashx：2个

Jquery

AutoComplete

5星 · 超过95%的资源需积分: 9 84 浏览量 2015-06-09 07:07:04 上传评论收藏 159KB ZIP 举报

**jQuery AutoComplete 知识点详解** jQuery AutoComplete 是一个非常流行的 jQuery 插件，它为输入框提供了自动补全的功能，广泛应用于网页表单、搜索框等场景，以提高用户体验。这个插件允许开发者从本地数组或通过异步方式从服务器获取数据，实现动态的搜索建议。 ### 1. 安装与引入确保你已经安装了 jQuery。如果还没有，可以通过 CDN（内容分发网络）链接引入 jQuery。例如，你可以使用以下链接： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 接下来，引入 jQuery UI 包含 AutoComplete 的库，同样通过 CDN： ```html <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> ``` ### 2. 基本使用要使用 AutoComplete，你需要在输入框上添加 `autocomplete` 属性，并指定一个方法名，该方法将处理用户输入并返回建议列表。例如： ```html <input type="text" id="search-box" autocomplete="off"> ``` 然后，在 JavaScript 部分编写初始化代码： ```javascript $(function() { $("#search-box").autocomplete({ source: ["Apple", "Banana", "Cherry"] // 本地数组示例 }); }); ``` 这段代码会为 ID 为 "search-box" 的输入框启用 AutoComplete 功能，并从给定的数组中提供补全建议。 ### 3. 后台数据源如果需要从服务器获取数据，可以使用 `source` 选项接受一个函数，该函数接受两个参数：request 和 response。在 request 参数中，你可以访问用户的输入值；在 response 参数中，你需要返回一个包含建议的数组。例如： ```javascript $("#search-box").autocomplete({ source: function(request, response) { $.ajax({ url: "search.php", data: { term: request.term }, // 将用户输入作为搜索条件 success: function(data) { response(data); // 返回服务器返回的数据 } }); } }); ``` 在这里，`search.php` 是一个假设的服务器端脚本，它接收 `term` 参数并返回匹配的建议列表。 ### 4. 自定义设置 jQuery AutoComplete 提供了许多可配置的选项来满足不同的需求，例如： - `minLength`：用户输入多少字符后触发自动补全，默认为 1。 - `delay`：在用户停止输入后多久触发请求，单位为毫秒，默认为 300。 - `appendTo`：指定自动补全菜单插入到哪个元素。 - `select`：当用户选择一个建议时触发的回调函数。 ### 5. 自定义样式默认的 jQuery UI 主题可能不符合所有设计要求。你可以通过 CSS 自定义 AutoComplete 的样式，或者使用其他的 jQuery UI 主题。 ### 6. 示例项目在提供的 `JqueryAutoCompleteDemo` 压缩包中，通常包含了完整的 HTML、CSS 和 JavaScript 文件，展示了如何使用 jQuery AutoComplete 实现自动填充功能，包括本地数组和后台数据两种情况。通过分析和运行这个示例，你可以更深入地理解其工作原理和用法。 jQuery AutoComplete 是一个强大的工具，能帮助开发者轻松实现自动补全功能，提升用户体验。通过灵活的配置和扩展，它可以适应各种复杂的项目需求。

展开

资源推荐

资源详情

资源评论

收起资源包目录

JqueryAutoCompleteDemo.zip （23个子文件）

JqueryAutoCompleteDemo

jquery-1.7.1.min.js 92KB

jquery-ui

jquery-ui-1.8.17.custom.min.js 206KB

jquery-ui-widget-combobox.js 3KB

jquery-1.10.2.min.js 92KB

css

ui-lightness

images

ui-bg_glass_100_fdf5ce_1x400.png 125B

ui-bg_highlight-soft_100_eeeeee_1x100.png 90B

ui-icons_ffffff_256x240.png 4KB

ui-bg_glass_65_ffffff_1x400.png 105B

ui-icons_228ef1_256x240.png 4KB

ui-bg_diagonals-thick_18_b81900_40x40.png 260B

ui-bg_diagonals-thick_20_666666_40x40.png 251B

ui-bg_gloss-wave_35_f6a828_500x100.png 4KB

ui-bg_flat_10_000000_40x100.png 178B

ui-icons_ef8c08_256x240.png 4KB

ui-icons_ffd27a_256x240.png 4KB

ui-bg_highlight-soft_75_ffe45c_1x100.png 129B

ui-icons_222222_256x240.png 4KB

ui-bg_glass_100_f6f6f6_1x400.png 104B

jquery-ui-1.8.17.custom.css 33KB

remoteJSON.ashx 1KB

remoteArray.ashx 961B

demo2.html 2KB

demo.html 9KB

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Fancy Validate - jQuery UI Autocomplete</title>
    <link href="jquery-ui/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
    <script src="jquery-1.7.1.min.js"></script>
    <script src="jquery-ui/js/jquery-ui-1.8.17.custom.min.js"></script>
    <script src="jquery-ui/js/jquery-ui-widget-combobox.js"></script>
    <style>
        body {
            font-size: 14px;
        }
        fieldset {
            width: 388px;
            margin: 0 auto;
            text-align: right;
        }
        fieldset div {
            margin: 15px auto;
        }
        .cbo .ui-button-text {
            line-height: 1.3;
            padding-top: 0;
            padding-bottom: 0;
        }
        .cbo .ui-autocomplete-input {
            width: 7.2em;
        }
    </style>
    <script>
        $(function() {
            /* ajax autocomplete */
            // ajax 返回字符串数组
            $("#ajax1").autocomplete({
                source: "remoteArray.ashx",
                minLength: 2
            });
            // ajax 返回json数组
            $("#ajax2").autocomplete({
                source: "remoteJSON.ashx",
                minLength: 2
            });


            /* local source autocomplete */
            // 本地字符串数组
            var availableTags = [
			    "C#",
			    "C++",
			    "Java",
			    "JavaScript",
			    "ASP",
                "ASP.NET",
			    "JSP",
			    "PHP",
			    "Python",
			    "Ruby"
		    ];
            $("#local1").autocomplete({
                source: availableTags
                /*, select: function(e, ui) {
                alert(ui.item.value) 
                }*/
            });
            /*$("#local1").bind("autocompleteselect", function(e, ui) {
                alert(ui.item.value);
            });*/
            // 本地json数组
            var availableTagsJSON = [
			    { label: "C# Language", value: "C#" },
			    { label: "C++ Language", value: "C++" },
			    { label: "Java Language", value: "Java" },
			    { label: "JavaScript Language", value: "JavaScript" },
			    { label: "ASP.NET", value: "ASP.NET" },
			    { label: "JSP", value: "JSP" },
			    { label: "PHP", value: "PHP" },
			    { label: "Python", value: "Python" },
			    { label: "Ruby", value: "Ruby" }
		    ];
            $("#local2").autocomplete({
                source: availableTagsJSON
            });

            /* custom source autocomplete */
            // 自定义source函数
            var hosts = ["gmail.com", "live.com", "hotmail.com", "yahoo.com", "cnblogs.com", "火星.com", "囧月.com"];
            $("#email1").autocomplete({
                autoFocus: true,
                source: function(request, response) {
                    var term = request.term, //request.term为输入的字符串
                        ix = term.indexOf("@"),
                        name = term, // 用户名
                        host = "", // 域名
                        result = []; // 结果

                    result.push(term);
                    // result.push({ label: term, value: term }); // json格式
                    if (ix > -1) {
                        name = term.slice(0, ix);
                        host = term.slice(ix + 1);
                    }
                    if (name) {
                        var findedHosts = (host ? $.grep(hosts, function(value) {
                            return value.indexOf(host) > -1;
                        }) : hosts),
                        findedResults = $.map(findedHosts, function(value) {
                            return name + "@" + value; //返回字符串格式
                            // return { label: name + " @ " + value, value: name + "@" + value }; // json格式
                        });
                        result = result.concat($.makeArray(findedResults));
                    }
                    response(result); //呈现结果
                }
            });

            /* jsonp autocomplete */
            // 自定义source函数
            $("#jsonp").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "http://ws.geonames.org/searchJSON",
                        dataType: "jsonp",
                        data: {
                            featureClass: "P",
                            style: "full",
                            maxRows: 12,
                            name_startsWith: request.term
                        },
                        success: function(data) {
                            response($.map(data.geonames, function(item) {
                                return {
                                    label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                    value: item.name
                                }
                            }));
                        }
                    });
                },
                minLength: 2
                /*, select: function( event, ui ) {
                log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
                },*/
            });

            /* multi value autocomplete */
            // 按逗号分隔多个值
            function split(val) {
                return val.split(/,\s*/);
            }
            // 提取输入的最后一个值
            function extractLast(term) {
                return split(term).pop();
            }
            // 按Tab键时，取消为输入框设置value
            function keyDown(event) {
                if (event.keyCode === $.ui.keyCode.TAB &&
						$(this).data("autocomplete").menu.active) {
                    event.preventDefault();
                }
            }
            var options = {
                // 获得焦点
                focus: function() {
                    // prevent value inserted on focus
                    return false;
                },
                // 从autocomplete弹出菜单选择一个值时，加到输入框最后，并以逗号分隔
                select: function(event, ui) {
                    var terms = split(this.value);
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push(ui.item.value);
                    // add placeholder to get the comma-and-space at the end
                    terms.push("");
                    this.value = terms.join(", ");
                    return false;
                }
            };
            // 多个值，本地数组
            $("#local3").bind("keydown", keyDown)
                .autocomplete($.extend(options, {
                    minLength: 2,
                    source: function(request, response) {
                        // delegate back to autocomplete, but extract the last term
                        response($.ui.autocomplete.filter(
						    availableTags, extractLast(request.term)));
                    }
                }));
            // 多个值，ajax返回json
            $("#ajax3").bind("keydown", keyDown)
                .autocomplete($.extend(options, {
                    minLength: 2,
                    source: function(request, response) {
                        $.getJSON("remoteJSON.ashx", {
                            term: extractLast(request.term)
                        }, response);
                    }
                }));

            /* combobox autocomplete */
            $("#combo1").combobox();
        });
    </script>
</head>
<body>
    <form ac