Skip to content

Commit db674f0

Browse files
onokumusonokumus
committed
fixed tagsinput plugin source
1 parent 5a9f1ee commit db674f0

10 files changed

Lines changed: 557 additions & 0 deletions

File tree

‎.gitmodules‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,6 @@
7070
[submodule "src/assets/submodule/form"]
7171
path = src/assets/submodule/form
7272
url = https://github.com/malsup/form.git
73+
[submodule "src/assets/submodule/tagsinput"]
74+
path = src/assets/submodule/tagsinput
75+
url = https://github.com/xoxco/jQuery-Tags-Input.git

‎dist/assets/lib/tagsinput/README.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
# jQuery Tags Input Plugin
2+
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!
9+
10+
[Get it from Github](https://github.com/xoxco/jQuery-Tags-Input)
11+
12+
[View Demo](http://xoxco.com/projects/code/tagsinput/)
13+
14+
[Test it yourself using this jsFiddle Demo](http://jsfiddle.net/7aDak/)
15+
16+
Created by [XOXCO](http://xoxco.com)
17+
18+
19+
## Instructions
20+
21+
First, add the Javascript and CSS files to your <head> tag:
22+
23+
<script src="jquery.tagsinput.js"></script>
24+
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
25+
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.
29+
30+
<input name="tags" id="tags" value="foo,bar,baz" />
31+
32+
Then, simply call the tagsInput function on any field that should be treated as
33+
a list of tags.
34+
35+
$('#tags').tagsInput();
36+
37+
If you want to use jQuery.autocomplete, you can pass in a parameter with the
38+
autocomplete url.
39+
40+
$('#tags').tagsInput({
41+
autocomplete_url:'http://myserver.com/api/autocomplete'
42+
});
43+
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+
48+
$('#tags').tagsInput({
49+
autocomplete_url:'http://myserver.com/api/autocomplete',
50+
autocomplete:{selectFirst:true,width:'100px',autoFill:true}
51+
});
52+
53+
You can add and remove tags by calling the addTag() and removeTag() functions.
54+
55+
$('#tags').addTag('foo');
56+
$('#tags').removeTag('bar');
57+
58+
You can import a list of tags using the importTags() function...
59+
60+
$('#tags').importTags('foo,bar,baz');
61+
62+
You can also use importTags() to reset the tag list...
63+
64+
$('#tags').importTags('');
65+
66+
And you can check if a tag exists using tagExist()...
67+
68+
if ($('#tags').tagExist('foo')) { ... }
69+
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.
73+
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.
78+
79+
If you want a function to be called every time a tag is updated/deleted, set it
80+
as the 'onChange' option.
81+
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.
85+
86+
## Options
87+
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+
'removeWithBackspace' : true,
99+
'minChars' : 0,
100+
'maxChars' : 0 //if not provided there is no limit,
101+
'placeholderColor' : '#666666'
102+
});

‎dist/assets/lib/tagsinput/bower.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "jquery.tagsinput",
3+
"version": "1.3.3",
4+
"main": ["jquery.tagsinput.js", "jquery.tagsinput.css"],
5+
"ignore": [
6+
"**/.*",
7+
"*.html",
8+
"*.md",
9+
"*.json",
10+
"*.min.js",
11+
"test"
12+
],
13+
"dependencies": {
14+
"jquery": "1.x"
15+
}
16+
}

‎dist/assets/lib/tagsinput/example.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
2+
<link rel="stylesheet" type="text/css" href="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.css" />
3+
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
4+
<script type="text/javascript" src="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.js"></script>
5+
<!-- To test using the original jQuery.autocomplete, uncomment the following -->
6+
<!--
7+
<script type='text/javascript' src='http://xoxco.com/x/tagsinput/jquery-autocomplete/jquery.autocomplete.min.js'></script>
8+
<link rel="stylesheet" type="text/css" href="http://xoxco.com/x/tagsinput/jquery-autocomplete/jquery.autocomplete.css" />
9+
-->
10+
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'></script>
11+
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/start/jquery-ui.css" />
12+
13+
14+
<script type="text/javascript">
15+
16+
function onAddTag(tag) {
17+
alert("Added a tag: " + tag);
18+
}
19+
function onRemoveTag(tag) {
20+
alert("Removed a tag: " + tag);
21+
}
22+
23+
function onChangeTag(input,tag) {
24+
alert("Changed a tag: " + tag);
25+
}
26+
27+
$(function() {
28+
29+
$('#tags_1').tagsInput({width:'auto'});
30+
$('#tags_2').tagsInput({
31+
width: 'auto',
32+
onChange: function(elem, elem_tags)
33+
{
34+
var languages = ['php','ruby','javascript'];
35+
$('.tag', elem_tags).each(function()
36+
{
37+
if($(this).text().search(new RegExp('\\b(' + languages.join('|') + ')\\b')) >= 0)
38+
$(this).css('background-color', 'yellow');
39+
});
40+
}
41+
});
42+
$('#tags_3').tagsInput({
43+
width: 'auto',
44+
45+
//autocomplete_url:'test/fake_plaintext_endpoint.html' //jquery.autocomplete (not jquery ui)
46+
autocomplete_url:'test/fake_json_endpoint.html' // jquery ui autocomplete requires a json endpoint
47+
});
48+
49+
50+
// Uncomment this line to see the callback functions in action
51+
// $('input.tags').tagsInput({onAddTag:onAddTag,onRemoveTag:onRemoveTag,onChange: onChangeTag});
52+
53+
// Uncomment this line to see an input with no interface for adding new tags.
54+
// $('input.tags').tagsInput({interactive:false});
55+
});
56+
57+
</script>
58+
<form>
59+
<p><label>Defaults:</label>
60+
<input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" /></p>
61+
62+
<p><label>Technologies: (Programming languages in yellow)</label>
63+
<input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" /></p>
64+
65+
<p><label>Autocomplete:</label>
66+
<input id='tags_3' type='text' class='tags'></p>
67+
68+
</form>

‎dist/assets/lib/tagsinput/jquery.tagsinput.css‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)