JqueryAutoComplete使用demo资源-CSDN文库

共23个文件

png：14个

js：4个

ashx：2个

Jquery

AutoComplete

5星 · 超过95%的资源需积分: 9 12 浏览量 2015-06-09 15: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

评论收藏

内容反馈