jQuery UI 实例 - 自动完成(Autocomplete)
封面图
•
2025-11-16
•
jQuery
215
0
0
0
jQuery UI 的 **Autocomplete(自动完成)** 是一个非常实用的组件,用于在用户输入时提供搜索建议。它可以通过简单的配置实现本地数据或远程数据的自动补全功能。 --- ## 🧾 一、基本结构 要使用 jQuery UI 的 Autocomplete,你需要: 1. 引入 jQuery 和 jQuery UI 的库文件。 2. 在 HTML 中创建一个 `<input>` 元素。 3. 使用 JavaScript 初始化 Autocomplete 组件。 --- ## 📦 二、引入依赖 ```html <!-- 引入 jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入 jQuery UI CSS --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <!-- 引入 jQuery UI JS --> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> ``` --- ## 💡 三、本地数据示例 ### HTML: ```html <input id="autocomplete" placeholder="输入内容..." /> ``` ### JavaScript: ```javascript $(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" ]; $("#autocomplete").autocomplete({ source: availableTags }); }); ``` --- ## 🌐 四、远程数据示例(AJAX) 如果你的数据是通过 AJAX 请求获取的,可以这样使用: ### HTML: ```html <input id="remote-autocomplete" placeholder="搜索..." /> ``` ### JavaScript: ```javascript $(function() { $("#remote-autocomplete").autocomplete({ source: function(request, response) { $.ajax({ url: "https://api.example.com/search", // 替换为你的 API 地址 dataType: "json", data: { term: request.term }, success: function(data) { response(data); // 假设返回的是数组 } }); }, minLength: 2 // 输入至少两个字符才开始搜索 }); }); ``` --- ## 🎨 五、样式与自定义 你可以通过 CSS 自定义 Autocomplete 的外观,例如: ```css .ui-menu-item { font-size: 14px; } .ui-menu-item:hover { background-color: #f0f0f0; } ``` --- ## 🧩 六、其他常用选项 | 选项 | 描述 | |------|------| | `source` | 数据源,可以是数组或函数 | | `minLength` | 输入最小长度才触发自动完成 | | `delay` | 输入后延迟多少毫秒再请求数据(适用于远程) | | `select` | 当用户选择一个选项时触发的回调函数 | ### 示例:添加 `select` 事件 ```javascript $("#autocomplete").autocomplete({ source: availableTags, select: function(event, ui) { alert("你选择了: " + ui.item.value); } }); ``` --- ## ✅ 七、总结 - jQuery UI 的 Autocomplete 简单易用,适合本地和远程数据。 - 可以通过 `source` 指定数据来源。 - 支持丰富的事件和样式定制。 --- 如果你需要我帮你生成一个完整的 HTML 页面示例,或者有更具体的使用场景(如从数据库动态加载),欢迎继续提问!
上一篇:
JQuery实现点击div以外的位置隐藏该div窗口
下一篇:
香辣醉鸡 菜谱
标题录入,一次不能超过6条
留言
评论