jquery tag 输入
时间: 2023-10-31 12:11:01 浏览: 52
可以使用 jQuery UI 的 Autocomplete 插件来实现 tag 输入的功能。具体步骤如下:
1. 引入 jQuery 和 jQuery UI 的库文件。
```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0-rc.2/jquery-ui.min.js"></script>
```
2. 创建一个文本框和一个隐藏域来存储 tag 值。
```html
<input type="text" id="tags-input">
<input type="hidden" id="tags-value">
```
3. 初始化 Autocomplete 插件。
```javascript
$(function() {
var availableTags = [
"HTML",
"CSS",
"JavaScript",
"jQuery",
"Bootstrap"
];
$("#tags-input").autocomplete({
source: availableTags,
select: function(event, ui) {
var tagsValue = $("#tags-value").val();
if (tagsValue === "") {
$("#tags-value").val(ui.item.value);
} else {
$("#tags-value").val(tagsValue + "," + ui.item.value);
}
$("#tags-input").val("");
return false;
}
});
});
```
4. 将选择的 tag 值添加到隐藏域中。
```javascript
select: function(event, ui) {
var tagsValue = $("#tags-value").val();
if (tagsValue === "") {
$("#tags-value").val(ui.item.value);
} else {
$("#tags-value").val(tagsValue + "," + ui.item.value);
}
$("#tags-input").val("");
return false;
}
```
5. 可以通过隐藏域的值来获取所有选中的 tag。
```javascript
var tags = $("#tags-value").val().split(",");
```
以上就是使用 jQuery UI 的 Autocomplete 插件实现 tag 输入的基本步骤。