首页jQUery 设计自动提示文本框全部代码

jQUery 设计自动提示文本框全部代码

时间: 2024-11-05 15:32:56 浏览: 20

在jQuery中设计一个自动提示文本框（通常用于输入框实现模糊搜索功能），你可以使用`autocomplete`插件。以下是一个基本的代码示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Autocomplete Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> </head> <body> <input id="searchBox" placeholder="Search..."> <script> $( function() { $( "#searchBox" ).autocomplete({ source: ["Apple", "Banana", "Cherry", "Date", "Elderberry"], minLength: 1, select: function(event, ui) { // 这里可以根据需要处理选中的值 console.log("Selected:", ui.item.label); } }); }); </script> </body> </html> ``` 在这个例子中： - `#searchBox`是你的输入文本框ID。 - `source`属性指定了数据源，这里是一个静态数组，实际应用中可以替换为从服务器获取的数据。 - `minLength`设置为1，表示当输入框长度大于1时才开始显示提示。 - `select`事件会在用户选择项时触发，并传递所选项的信息。

阅读全文