首页使用 jQuery 实现自动提示文本框的示例代码

使用 jQuery 实现自动提示文本框的示例代码

时间: 2024-11-04 22:16:07 浏览: 26

在jQuery中，实现自动提示（也称为下拉列表、自动完成或建议输入）通常会使用`autocomplete`插件。以下是一个基本的示例代码，它展示了如何在一个文本框上添加自动提示功能： ```html <!DOCTYPE html> <html lang="en"> <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://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.1/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.1/jquery-ui.js"></script> </head> <body> <input id="autocomplete" type="text"> <script> $(document).ready(function () { var availableTags = [ "Apple", "Banana", "Cherry", "Date", // ... 更多选项 ]; $("#autocomplete").autocomplete({ source: availableTags, minLength: 1 }); }); </script> </body> </html> ``` 在这个例子中，当用户开始在id为`autocomplete`的输入框中输入内容，`source`属性中的数组元素将作为建议显示出来。如果输入的字符数少于`minLength`设置的值（这里是1），则不会触发自动提示。

阅读全文