Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

updating readme to markdown

  • Loading branch information...
commit ad2889e6a4687e1b80c3ee2995b9a711c4d22c57 1 parent 73c6060
Ben Brown benbrown authored
Showing with 52 additions and 73 deletions.
  1. +38 −48 README → README.md
  2. +14 −25 test.html → example.html
86 README → README.md
View
@@ -1,18 +1,4 @@
-jQuery Tags Input Plugin 1.3.2
-
-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
-------------------------------------------------------
+# jQuery Tags Input Plugin
Do you use tags to organize content on your site?
This plugin will turn your boring tag list into a
@@ -22,56 +8,61 @@ all the data - your form just sees a comma-delimited
list of tags!
-Instructions
+[Get it from Github](https://github.com/xoxco/jQuery-Tags-Input)
+
+[View Demo](http://xoxco.com/projects/code/tagsinput)
+
+
+## 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" />
+ <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" />
+ <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();
+ $('#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'
-});
+ $('#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}
-});
+ $('#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');
+ $('#tags').addTag('foo');
+ $('#tags').removeTag('bar');
You can import a list of tags using the importTags() function...
-$('#tags').importTags('foo,bar,baz');
+ $('#tags').importTags('foo,bar,baz');
You can also use importTags() to reset the tag list...
-$('#tags').importTags('');
+ $('#tags').importTags('');
And you can check if a tag exists using tagExist()...
-if ($('#tags').tagExist('foo')) { ... }
+ if ($('#tags').tagExist('foo')) { ... }
If additional functionality is required when a tag is added or removed, you may
specify callback functions via the onAddTag and onRemoveTag parameters. Both
@@ -91,19 +82,18 @@ 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'
-});
-
+ $(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'
+ });
39 test.html → example.html
View
@@ -1,12 +1,7 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8" />
- <title>jQuery Tags Input Test Page</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
+
+ <link rel="stylesheet" type="text/css" href="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
- <script type="text/javascript" src="jquery.tagsinput.js"></script>
+ <script type="text/javascript" src="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.js"></script>
<!-- To test using the original jQuery.autocomplete, uncomment the following -->
<!--
<script type='text/javascript' src='http://xoxco.com/x/tagsinput/jquery-autocomplete/jquery.autocomplete.min.js'></script>
@@ -31,8 +26,9 @@
$(function() {
- $('#tags_1').tagsInput();
+ $('#tags_1').tagsInput({width:'auto'});
$('#tags_2').tagsInput({
+ width: 'auto',
onChange: function(elem, elem_tags)
{
var languages = ['php','ruby','javascript'];
@@ -44,6 +40,8 @@
}
});
$('#tags_3').tagsInput({
+ width: 'auto',
+
//autocomplete_url:'test/fake_plaintext_endpoint.html' //jquery.autocomplete (not jquery ui)
autocomplete_url:'test/fake_json_endpoint.html' // jquery ui autocomplete requires a json endpoint
});
@@ -57,23 +55,14 @@
});
</script>
-
-</head>
-<body>
- <header>
- jQuery Tags Input!
- </header>
- <section>
<form>
- <input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" />
+ <p><label>Defaults:</label>
+ <input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" /></p>
- <label>Technologies: (Programming languages in yellow)</label>
- <input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" />
+ <p><label>Technologies: (Programming languages in yellow)</label>
+ <input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" /></p>
- <label>Autocomplete:</label>
- <input id='tags_3' type='text' class='tags'>
+ <p><label>Autocomplete:</label>
+ <input id='tags_3' type='text' class='tags'></p>
- </form>
- </section>
-
-</body>
+ </form>
Please sign in to comment.
Something went wrong with that request. Please try again.