This repository has been archived by the owner on Jul 17, 2020. It is now read-only.
forked from xoxco/jQuery-Tags-Input
-
Notifications
You must be signed in to change notification settings - Fork 1
/
README
97 lines (70 loc) · 3.08 KB
/
README
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
jQuery Tags Input Plugin 1.3.1
Copyright (c) 2011 XOXCO, Inc
Documentation for this plugin lives here:
http://xoxco.com/clickable/jquery-tags-input
Licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php
The git repository for this plugin can be found at:
https://github.com/xoxco/jQuery-Tags-Input
ben@xoxco.com
------------------------------------------------------
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!
Instructions
First, add the Javascript and CSS files to your <head> tag:
<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
Create a real input in your form that will contain a comma-separated list of
tags. You can put any default or existing tags in the value attribute, and
they'll be handled properly.
<input name="tags" id="tags" value="foo,bar,baz" />
Then, simply call the tagsInput function on any field that should be treated as
a list of tags.
$('#tags').tagsInput();
If you want to use jQuery.autocomplete, you can pass in a parameter with the
autocomplete url.
$('#tags').tagsInput({
autocomplete_url:'http://myserver.com/api/autocomplete'
});
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.
$('#tags').tagsInput({
autocomplete_url:'http://myserver.com/api/autocomplete',
autocomplete:{selectFirst:true,width:'100px',autoFill:true}
});
You can add and remove tags by calling the addTag() and removeTag() functions.
$('#tags').addTag('foo');
$('#tags').removeTag('bar');
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.
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.
If you want a function to be called every time a tag is updated/deleted, set it
as the 'onChange' option.
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.
Options
$(selector).tagsInput({
'autocomplete_url': url_to_autocomplete_api,
'autocomplete': { option: value, option: value},
'height':'100px',
'width':'300px',
'interactive':true,
'defaultText':'add a tag',
'onAddTag':callback_function,
'onRemoveTag':callback_function,
'onChange' : callback_function,
'removeWithBackspace' : true,
'minChars' : 0,
'maxChars' : 0 //if not provided there is no limit,
'placeholderColor' : '#666666'
});