Skip to content

Commit ad2889e

Browse files
author
Ben Brown
committed
updating readme to markdown
1 parent 73c6060 commit ad2889e

File tree

2 files changed

+52
-73
lines changed

2 files changed

+52
-73
lines changed

‎README‎ renamed to ‎README.md‎

Lines changed: 38 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,4 @@
1-
jQuery Tags Input Plugin 1.3.2
2-
3-
Copyright (c) 2011 XOXCO, Inc
4-
5-
Documentation for this plugin lives here:
6-
http://xoxco.com/clickable/jquery-tags-input
7-
8-
Licensed under the MIT license:
9-
http://www.opensource.org/licenses/mit-license.php
10-
11-
The git repository for this plugin can be found at:
12-
https://github.com/xoxco/jQuery-Tags-Input
13-
14-
[email protected]
15-
------------------------------------------------------
1+
# jQuery Tags Input Plugin
162

173
Do you use tags to organize content on your site?
184
This plugin will turn your boring tag list into a
@@ -22,56 +8,61 @@ all the data - your form just sees a comma-delimited
228
list of tags!
239

2410

25-
Instructions
11+
[Get it from Github](https://github.com/xoxco/jQuery-Tags-Input)
12+
13+
[View Demo](http://xoxco.com/projects/code/tagsinput)
14+
15+
16+
## Instructions
2617

2718
First, add the Javascript and CSS files to your <head> tag:
2819

29-
<script src="jquery.tagsinput.js"></script>
30-
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
20+
<script src="jquery.tagsinput.js"></script>
21+
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
3122

3223
Create a real input in your form that will contain a comma-separated list of
3324
tags. You can put any default or existing tags in the value attribute, and
3425
they'll be handled properly.
3526

36-
<input name="tags" id="tags" value="foo,bar,baz" />
27+
<input name="tags" id="tags" value="foo,bar,baz" />
3728

3829
Then, simply call the tagsInput function on any field that should be treated as
3930
a list of tags.
4031

41-
$('#tags').tagsInput();
32+
$('#tags').tagsInput();
4233

4334
If you want to use jQuery.autocomplete, you can pass in a parameter with the
4435
autocomplete url.
4536

46-
$('#tags').tagsInput({
47-
autocomplete_url:'http://myserver.com/api/autocomplete'
48-
});
37+
$('#tags').tagsInput({
38+
autocomplete_url:'http://myserver.com/api/autocomplete'
39+
});
4940

5041
If you're using the bassistance jQuery.autocomplete, which takes extra
5142
parameters, you can also send in options to the autocomplete plugin, as
5243
described here.
5344

54-
$('#tags').tagsInput({
55-
autocomplete_url:'http://myserver.com/api/autocomplete',
56-
autocomplete:{selectFirst:true,width:'100px',autoFill:true}
57-
});
45+
$('#tags').tagsInput({
46+
autocomplete_url:'http://myserver.com/api/autocomplete',
47+
autocomplete:{selectFirst:true,width:'100px',autoFill:true}
48+
});
5849

5950
You can add and remove tags by calling the addTag() and removeTag() functions.
6051

61-
$('#tags').addTag('foo');
62-
$('#tags').removeTag('bar');
52+
$('#tags').addTag('foo');
53+
$('#tags').removeTag('bar');
6354

6455
You can import a list of tags using the importTags() function...
6556

66-
$('#tags').importTags('foo,bar,baz');
57+
$('#tags').importTags('foo,bar,baz');
6758

6859
You can also use importTags() to reset the tag list...
6960

70-
$('#tags').importTags('');
61+
$('#tags').importTags('');
7162

7263
And you can check if a tag exists using tagExist()...
7364

74-
if ($('#tags').tagExist('foo')) { ... }
65+
if ($('#tags').tagExist('foo')) { ... }
7566

7667
If additional functionality is required when a tag is added or removed, you may
7768
specify callback functions via the onAddTag and onRemoveTag parameters. Both
@@ -91,19 +82,18 @@ option to false.
9182

9283
Options
9384

94-
$(selector).tagsInput({
95-
'autocomplete_url': url_to_autocomplete_api,
96-
'autocomplete': { option: value, option: value},
97-
'height':'100px',
98-
'width':'300px',
99-
'interactive':true,
100-
'defaultText':'add a tag',
101-
'onAddTag':callback_function,
102-
'onRemoveTag':callback_function,
103-
'onChange' : callback_function,
104-
'removeWithBackspace' : true,
105-
'minChars' : 0,
106-
'maxChars' : 0 //if not provided there is no limit,
107-
'placeholderColor' : '#666666'
108-
});
109-
85+
$(selector).tagsInput({
86+
'autocomplete_url': url_to_autocomplete_api,
87+
'autocomplete': { option: value, option: value},
88+
'height':'100px',
89+
'width':'300px',
90+
'interactive':true,
91+
'defaultText':'add a tag',
92+
'onAddTag':callback_function,
93+
'onRemoveTag':callback_function,
94+
'onChange' : callback_function,
95+
'removeWithBackspace' : true,
96+
'minChars' : 0,
97+
'maxChars' : 0 //if not provided there is no limit,
98+
'placeholderColor' : '#666666'
99+
});

‎test.html‎ renamed to ‎example.html‎

Lines changed: 14 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<title>jQuery Tags Input Test Page</title>
6-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7-
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
1+
2+
<link rel="stylesheet" type="text/css" href="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.css" />
83
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
9-
<script type="text/javascript" src="jquery.tagsinput.js"></script>
4+
<script type="text/javascript" src="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.js"></script>
105
<!-- To test using the original jQuery.autocomplete, uncomment the following -->
116
<!--
127
<script type='text/javascript' src='http://xoxco.com/x/tagsinput/jquery-autocomplete/jquery.autocomplete.min.js'></script>
@@ -31,8 +26,9 @@
3126

3227
$(function() {
3328

34-
$('#tags_1').tagsInput();
29+
$('#tags_1').tagsInput({width:'auto'});
3530
$('#tags_2').tagsInput({
31+
width: 'auto',
3632
onChange: function(elem, elem_tags)
3733
{
3834
var languages = ['php','ruby','javascript'];
@@ -44,6 +40,8 @@
4440
}
4541
});
4642
$('#tags_3').tagsInput({
43+
width: 'auto',
44+
4745
//autocomplete_url:'test/fake_plaintext_endpoint.html' //jquery.autocomplete (not jquery ui)
4846
autocomplete_url:'test/fake_json_endpoint.html' // jquery ui autocomplete requires a json endpoint
4947
});
@@ -57,23 +55,14 @@
5755
});
5856

5957
</script>
60-
61-
</head>
62-
<body>
63-
<header>
64-
jQuery Tags Input!
65-
</header>
66-
<section>
6758
<form>
68-
<input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" />
59+
<p><label>Defaults:</label>
60+
<input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" /></p>
6961

70-
<label>Technologies: (Programming languages in yellow)</label>
71-
<input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" />
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>
7264

73-
<label>Autocomplete:</label>
74-
<input id='tags_3' type='text' class='tags'>
65+
<p><label>Autocomplete:</label>
66+
<input id='tags_3' type='text' class='tags'></p>
7567

76-
</form>
77-
</section>
78-
79-
</body>
68+
</form>

0 commit comments

Comments
 (0)