Skip to content

Commit 5625dac

Browse files
underovskyunderovsky
committed
Readme
1 parent 59f529a commit 5625dac

File tree

2 files changed

+106
-73
lines changed

2 files changed

+106
-73
lines changed

‎README.md‎

Lines changed: 98 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,131 @@
1-
# jQuery Tags Input Plugin
1+
# jQuery Tags Input Revisited Plugin
22

3-
Do you use tags to organize content on your site?
4-
This plugin will turn your boring tag list into a
5-
magical input that turns each tag into a style-able
6-
object with its own delete link. The plugin handles
7-
all the data - your form just sees a comma-delimited
8-
list of tags!
3+
## Basic information
94

10-
[Get it from Github](https://github.com/xoxco/jQuery-Tags-Input)
5+
Forked from discontinued jQuery Tags Input Plugin created by [XOXCO](http://xoxco.com).
116

12-
[View Demo](http://xoxco.com/projects/code/tagsinput/)
7+
See the original project here: https://github.com/xoxco/jQuery-Tags-Input
138

14-
[Test it yourself using this jsFiddle Demo](http://jsfiddle.net/7aDak/)
9+
jQuery Tags Input Revisited Plugin is an improved and fixed version of the previous plugin. It's also adjusted to match the current web standards.
1510

16-
Created by [XOXCO](http://xoxco.com)
11+
Simple tag editing written in jQuery.
1712

13+
Original description: Do you use tags to organize content on your site? This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data - your form just sees a comma-delimited list of tags!
1814

19-
## Instructions
15+
## Improvements
2016

21-
First, add the Javascript and CSS files to your <head> tag:
17+
jQuery Tags Input Revisited welcomes few very important improvements:
18+
1. It switches input width adjustment from JS to flexbox.
19+
2. It manipulates styles with CSS not JS.
20+
3. It uses standard placeholder instead of input value.
21+
4. It uses CSS for remove link not text.
22+
5. It adds better validation for min/max string length, tags limit and pattern validation.
23+
6. It uses CSS matching current standards.
24+
7. It adds copy/paste mechanism that automatically splits the string into tags.
2225

23-
<script src="jquery.tagsinput.js"></script>
24-
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
26+
## Usage
2527

26-
Create a real input in your form that will contain a comma-separated list of
27-
tags. You can put any default or existing tags in the value attribute, and
28-
they'll be handled properly.
28+
Add the Javascript and CSS files to the HTML. You can use regular or minified files. Style the tags however you want.
2929

30-
<input name="tags" id="tags" value="foo,bar,baz" />
30+
```
31+
<script src="jquery.tagsinput-revisited.js"></script>
32+
<link rel="stylesheet" type="text/css" href="jquery.tagsinput-revisited.css">
33+
```
3134

32-
Then, simply call the tagsInput function on any field that should be treated as
33-
a list of tags.
35+
Create a real input in your form that will contain a delimiter-separated (by standard it's comma) list of tags. You can put any default or existing tags in the value attribute, and they'll be handled properly.
3436

35-
$('#tags').tagsInput();
37+
```
38+
<input name="tags" id="tags" class="tagsinput" value="foo,bar,baz">
39+
```
3640

37-
If you want to use jQuery.autocomplete, you can pass in a parameter with the
38-
autocomplete url.
41+
Then, simply call the tagsInput function on any field that should be treated as a list of tags.
3942

40-
$('#tags').tagsInput({
41-
autocomplete_url:'http://myserver.com/api/autocomplete'
42-
});
43+
```
44+
$('.tagsinput').tagsInput();
45+
```
4346

44-
If you're using the bassistance jQuery.autocomplete, which takes extra
45-
parameters, you can also send in options to the autocomplete plugin, as
46-
described here.
47+
If you want to use jQuery.autocomplete, you can pass in a parameter with the autocomplete url.
4748

48-
$('#tags').tagsInput({
49-
autocomplete_url:'http://myserver.com/api/autocomplete',
50-
autocomplete:{selectFirst:true,width:'100px',autoFill:true}
51-
});
49+
```
50+
$('.tagsinput').tagsInput({
51+
autocomplete_url: 'URL'
52+
});
53+
```
54+
55+
If you're using the bassistance jQuery.autocomplete, which takes extra parameters, you can also send in options to the autocomplete plugin, as described here.
56+
57+
```
58+
$('.tagsinput#tags').tagsInput({
59+
autocomplete_url: 'URL',
60+
autocomplete: {
61+
selectFirst: true,
62+
width: '100px',
63+
autoFill: true
64+
}
65+
});
66+
```
5267

5368
You can add and remove tags by calling the addTag() and removeTag() functions.
5469

55-
$('#tags').addTag('foo');
56-
$('#tags').removeTag('bar');
70+
```
71+
$('.tagsinput#tags').addTag('foo');
72+
$('.tagsinput#tags').removeTag('bar');
73+
```
74+
75+
You can import a list of tags using the importTags() function.
5776

58-
You can import a list of tags using the importTags() function...
77+
```
78+
$('.tagsinput#tags').importTags('foo, bar, baz');
79+
```
5980

60-
$('#tags').importTags('foo,bar,baz');
81+
You can also use importTags() to reset the tag list.
6182

62-
You can also use importTags() to reset the tag list...
83+
```
84+
$('.tagsinput#tags').importTags('');
85+
```
6386

64-
$('#tags').importTags('');
87+
And you can check if a tag exists using tagExist().
6588

66-
And you can check if a tag exists using tagExist()...
89+
```
90+
$('.tagsinput#tags').tagExist('foo')) { ... }
91+
```
6792

68-
if ($('#tags').tagExist('foo')) { ... }
93+
If additional functionality is required when a tag is added or removed, you may specify callback functions via the `onAddTag` and `onRemoveTag` parameters. Both functions should accept a single tag as the parameter.
6994

70-
If additional functionality is required when a tag is added or removed, you may
71-
specify callback functions via the onAddTag and onRemoveTag parameters. Both
72-
functions should accept a single tag as the parameter.
95+
If you do not want to provide a way to add tags, or you would prefer to provide an alternate interface for adding tags to the box, you may pass an false into the optional `interactive` parameter. The tags will still be rendered as per usual, and the `addTag` and `removeTag` functions will operate as expected.
7396

74-
If you do not want to provide a way to add tags, or you would prefer to provide
75-
an alternate interface for adding tags to the box, you may pass an false into
76-
the optional 'interactive' parameter. The tags will still be rendered as per
77-
usual, and the addTag and removeTag functions will operate as expected.
97+
If you want a function to be called every time a tag is updated/deleted, set it as the `onChange` option.
7898

79-
If you want a function to be called every time a tag is updated/deleted, set it
80-
as the 'onChange' option.
99+
By default, if the cursor is immediately after a tag, hitting backspace will delete that tag. If you want to override this, set the `removeWithBackspace` option to false.
81100

82-
By default, if the cursor is immediately after a tag, hitting backspace will
83-
delete that tag. If you want to override this, set the 'removeWithBackspace'
84-
option to false.
101+
For validation purposes you an use `unique`, `limit`, `minChars`, `maxChars` and `validationPattern` parameters.
85102

86103
## Options
87104

88-
$(selector).tagsInput({
89-
'autocomplete_url': url_to_autocomplete_api,
90-
'autocomplete': { option: value, option: value},
91-
'height':'100px',
92-
'width':'300px',
93-
'interactive':true,
94-
'defaultText':'add a tag',
95-
'onAddTag':callback_function,
96-
'onRemoveTag':callback_function,
97-
'onChange' : callback_function,
98-
'delimiter': [',',';'], // Or a string with a single delimiter. Ex: ';'
99-
'removeWithBackspace' : true,
100-
'minChars' : 0,
101-
'maxChars' : 0, // if not provided there is no limit
102-
'placeholderColor' : '#666666'
103-
});
105+
```
106+
$('.tagsinput#tags').tagsInput({
107+
interactive: true,
108+
placeholder: 'Add a tag',
109+
minChars: 2,
110+
maxChars: 20, // if not provided there is no limit
111+
limit: 5,
112+
validationPattern: new RegExp('^[a-zA-Z]+$'), // pattern you can use to validate input
113+
width: '300px', // standard option is 'auto'
114+
height: '100px', // standard option is 'auto'
115+
autocomplete: { option: value, option: value},
116+
autocomplete_url: url_to_autocomplete_api,
117+
hide: true,
118+
delimiter: [',',';'], // or a string with a single delimiter. Ex: ';'
119+
unique: true,
120+
removeWithBackspace: true,
121+
onAddTag: callback_function,
122+
onRemoveTag: callback_function,
123+
onChange: callback_function
124+
});
125+
```
126+
127+
## License
128+
129+
The MIT License (MIT)
130+
131+
Copyright (c) 2015 Krzysztof Rusnarczyk

‎src/jquery.tagsinput-revisited.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@
1010
$.fn.addTag = function(value, options) {
1111
options = jQuery.extend({
1212
focus: false,
13-
callback: true
13+
callback: true,
14+
minChars: 0,
15+
maxChars: null,
16+
limit: null,
17+
validationPattern: null
1418
}, options);
1519

1620
this.each(function() {
@@ -110,6 +114,7 @@
110114
width: 'auto',
111115
height: 'auto',
112116
autocomplete: {selectFirst: false},
117+
autocomplete_url: null,
113118
hide: true,
114119
delimiter: ',',
115120
unique: true,
@@ -177,7 +182,7 @@
177182
$(data.holder).removeClass('focus');
178183
});
179184

180-
if (settings.autocomplete_url !== undefined) {
185+
if (settings.autocomplete_url !== null) {
181186
var autocomplete_options = {source: settings.autocomplete_url};
182187

183188
for (attrname in settings.autocomplete) {
@@ -228,7 +233,7 @@
228233
});
229234
}
230235

231-
// TODO: keypress and input cannot interfere with each other (validation perspective also)
236+
// TODO: keypress and input cannot interfere with each other (look at validation perspective also)
232237

233238
// If a user types a delimiter create a new tag
234239
$(data.fake_input).on('keypress', data, function(event) {

0 commit comments

Comments
 (0)