mirror of
https://github.com/wahyd4/jQuery-Tags-Input.git
synced 2026-08-09 04:46:44 +10:00
updating readme to markdown
This commit is contained in:
Ben Brown
+38
-48
@@ -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'
|
||||
});
|
||||
+14
-25
@@ -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>
|
||||
Reference in New Issue
Block a user