使用 jQuery 实现自动提示文本框的示例代码
时间: 2024-11-04 13:16:07 浏览: 0
在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),则不会触发自动提示。
阅读全文