📌  相关文章
📜  EasyUI jQuery tagbox Widget(1)

📅  最后修改于: 2023-12-03 15:14:50.077000             🧑  作者: Mango

EasyUI jQuery tagbox Widget

Introduction

EasyUI jQuery tagbox Widget is a user-friendly tool that allows users to add and remove tags in a simple way. The widget is built using jQuery and is fully customizable.

Features
  • Supports adding and removing tags
  • Allows users to customize the tag color and style
  • Provides autocomplete suggestions for tag names
  • Enables users to set a limit on the number of tags that can be added
  • Uses AJAX to retrieve tag suggestions from the server
Installation
Using NPM
npm install easyui-tagbox
Using Yarn
yarn add easyui-tagbox
Manually
  1. Download the latest version of EasyUI jQuery tagbox Widget from GitHub.
  2. Extract the downloaded files to your project directory.
  3. Include the EasyUI jQuery tagbox Widget CSS and JavaScript files in your HTML code.
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="easyui-tagbox.css">
  </head>
  <body>
    <!-- Your HTML code here -->
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="easyui-tagbox.min.js"></script>
  </body>
</html>
Usage
Basic usage

To use the EasyUI jQuery tagbox Widget, simply add a div element with an id to your HTML code, and initialize the widget in your JavaScript code.

HTML:

<div id="tagbox"></div>

JavaScript:

$('#tagbox').tagbox();
Available options

The EasyUI jQuery tagbox Widget provides several options that can be used to customize the widget's behavior. Here are some of the available options:

prompt

Sets the text to display in the tagbox when it is empty.

Default: 'Add a tag'

$('#tagbox').tagbox({
  prompt: 'Enter a new tag'
});

separator

Sets the character used to separate tags.

Default: ','

$('#tagbox').tagbox({
  separator: ';'
});

width

Sets the width of the tagbox in pixels.

Default: 'auto'

$('#tagbox').tagbox({
  width: 200
});

height

Sets the height of the tagbox in pixels.

Default: 'auto'

$('#tagbox').tagbox({
  height: 100
});

limitToList

Enables or disables the ability to add tags that are not in the autocomplete list.

Default: true

$('#tagbox').tagbox({
  limitToList: false
});
Available methods

The EasyUI jQuery tagbox Widget provides several methods that can be used to manipulate the widget's behavior. Here are some of the available methods:

getTags()

Returns an array of the currently selected tags.

var tags = $('#tagbox').tagbox('getTags');
console.log(tags); // ['tag1', 'tag2', ...]

setTags(tags)

Sets the currently selected tags.

var tags = ['tag1', 'tag2', ...];
$('#tagbox').tagbox('setTags', tags);

select()

Selects the tagbox.

$('#tagbox').tagbox('select');

unselect()

Unselects the tagbox.

$('#tagbox').tagbox('unselect');
License

EasyUI jQuery tagbox Widget is released under the MIT license.