mirror of
https://github.com/wahyd4/jQuery-Tags-Input.git
synced 2026-08-09 21:06:43 +10:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 junv
|
291739bd50 | ||
 Ben Brown
|
e27248adde | ||
|
Ben Brown
|
bc50b025fb | ||
|
Ben Brown
|
50a623375d | ||
|
Ben Brown
|
b20d10a78f | ||
 Tomasz Tybulewicz
|
b56a968f97 | ||
 Łukasz Mierzwa
|
7476b8b75f | ||
 Bartosz Grzybowski
|
51d058c46b | ||
|
Ben Brown
|
6d2b1d3b72 | ||
|
Ben Brown
|
f8d1362f25 | ||
|
Ben Brown
|
78487e0592 | ||
|
Ben Brown
|
8d06653aa6 | ||
|
Ben Brown
|
ad2889e6a4 | ||
|
Ben Brown
|
73c60604f8 | ||
|
Ben Brown
|
49fc5f3ab1 | ||
|
Ben Brown
|
5437401613 | ||
|
Ben Brown
|
55145e9390 | ||
|
Ben Brown
|
00a112153c | ||
|
Ben Brown
|
53bce4bf40 | ||
|
Ben Brown
|
08c91e2f67 | ||
|
Ben Brown
|
b8665626c6 | ||
|
Ben Brown
|
2f564beaad | ||
|
Ben Brown
|
0b7d62a3e1 | ||
|
Ben Brown
|
b7d339216d | ||
|
Ben Brown
|
fdf650de12 | ||
|
Ben Brown
|
dcc33019ec | ||
 Xorrizon
|
fa10428b04 | ||
 David Haslem
|
37a4fb1e8e | ||
|
David Haslem
|
53ffc5f6ed | ||
 Chris Boden
|
1cc6f5b2f8 | ||
 Javier Toledo
|
1b461629fe | ||
|
Javier Toledo
|
ffac87c585 | ||
 Sebastian Motraghi
|
f40465718b | ||
|
Sebastian Motraghi
|
24832798ae | ||
|
Sebastian Motraghi
|
af2d7d2e84 | ||
|
Sebastian Motraghi
|
683637913c | ||
|
Sebastian Motraghi
|
22cb584ebc | ||
|
Sebastian Motraghi
|
bf11dcecd0 | ||
|
Sebastian Motraghi
|
1c61ecd45c | ||
|
Sebastian Motraghi
|
6ccb7f1dff | ||
|
Sebastian Motraghi
|
bd5a63f2eb | ||
 Jay Levitt
|
45fcb12091 | ||
 Maxime Corson
|
707bf84ee5 | ||
|
Maxime Corson
|
7d9854a3bb | ||
|
Jay Levitt
|
d8d8df71cf |
@@ -1,94 +0,0 @@
|
||||
jQuery Tags Input Plugin 1.2.5
|
||||
|
||||
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'
|
||||
});
|
||||
|
||||
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
|
||||
});
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
# jQuery Tags Input Plugin
|
||||
|
||||
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!
|
||||
|
||||
[Get it from Github](https://github.com/xoxco/jQuery-Tags-Input)
|
||||
|
||||
[View Demo](http://xoxco.com/projects/code/tagsinput/)
|
||||
|
||||
[Test it yourself using this jsFiddle Demo](http://jsfiddle.net/7aDak/)
|
||||
|
||||
Created by [XOXCO](http://xoxco.com)
|
||||
|
||||
|
||||
## 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');
|
||||
|
||||
You can import a list of tags using the importTags() function...
|
||||
|
||||
$('#tags').importTags('foo,bar,baz');
|
||||
|
||||
You can also use importTags() to reset the tag list...
|
||||
|
||||
$('#tags').importTags('');
|
||||
|
||||
And you can check if a tag exists using tagExist()...
|
||||
|
||||
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
|
||||
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'
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
|
||||
<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="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>
|
||||
<link rel="stylesheet" type="text/css" href="http://xoxco.com/x/tagsinput/jquery-autocomplete/jquery.autocomplete.css" />
|
||||
-->
|
||||
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'></script>
|
||||
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/start/jquery-ui.css" />
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function onAddTag(tag) {
|
||||
alert("Added a tag: " + tag);
|
||||
}
|
||||
function onRemoveTag(tag) {
|
||||
alert("Removed a tag: " + tag);
|
||||
}
|
||||
|
||||
function onChangeTag(input,tag) {
|
||||
alert("Changed a tag: " + tag);
|
||||
}
|
||||
|
||||
$(function() {
|
||||
|
||||
$('#tags_1').tagsInput({width:'auto'});
|
||||
$('#tags_2').tagsInput({
|
||||
width: 'auto',
|
||||
onChange: function(elem, elem_tags)
|
||||
{
|
||||
var languages = ['php','ruby','javascript'];
|
||||
$('.tag', elem_tags).each(function()
|
||||
{
|
||||
if($(this).text().search(new RegExp('\\b(' + languages.join('|') + ')\\b')) >= 0)
|
||||
$(this).css('background-color', 'yellow');
|
||||
});
|
||||
}
|
||||
});
|
||||
$('#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
|
||||
});
|
||||
|
||||
|
||||
// Uncomment this line to see the callback functions in action
|
||||
// $('input.tags').tagsInput({onAddTag:onAddTag,onRemoveTag:onRemoveTag,onChange: onChangeTag});
|
||||
|
||||
// Uncomment this line to see an input with no interface for adding new tags.
|
||||
// $('input.tags').tagsInput({interactive:false});
|
||||
});
|
||||
|
||||
</script>
|
||||
<form>
|
||||
<p><label>Defaults:</label>
|
||||
<input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" /></p>
|
||||
|
||||
<p><label>Technologies: (Programming languages in yellow)</label>
|
||||
<input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" /></p>
|
||||
|
||||
<p><label>Autocomplete:</label>
|
||||
<input id='tags_3' type='text' class='tags'></p>
|
||||
|
||||
</form>
|
||||
@@ -4,3 +4,4 @@ div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:no
|
||||
div.tagsinput input { width:80px; margin:0px; font-family: helvetica; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #000; outline:0px; margin-right:5px; margin-bottom:5px; }
|
||||
div.tagsinput div { display:block; float: left; }
|
||||
.tags_clear { clear: both; width: 100%; height: 0px; }
|
||||
.not_valid {background: #FBD8DB !important; color: #90111A !important;}
|
||||
|
||||
+147
-56
@@ -1,6 +1,6 @@
|
||||
/*
|
||||
|
||||
jQuery Tags Input Plugin 1.2.5
|
||||
jQuery Tags Input Plugin 1.3.3
|
||||
|
||||
Copyright (c) 2011 XOXCO, Inc
|
||||
|
||||
@@ -18,12 +18,66 @@
|
||||
|
||||
var delimiter = new Array();
|
||||
var tags_callbacks = new Array();
|
||||
$.fn.doAutosize = function(o){
|
||||
var minWidth = $(this).data('minwidth'),
|
||||
maxWidth = $(this).data('maxwidth'),
|
||||
val = '',
|
||||
input = $(this),
|
||||
testSubject = $('#'+$(this).data('tester_id'));
|
||||
|
||||
if (val === (val = input.val())) {return;}
|
||||
|
||||
// Enter new content into testSubject
|
||||
var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>');
|
||||
testSubject.html(escaped);
|
||||
// Calculate new width + whether to change
|
||||
var testerWidth = testSubject.width(),
|
||||
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
|
||||
currentWidth = input.width(),
|
||||
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|
||||
|| (newWidth > minWidth && newWidth < maxWidth);
|
||||
|
||||
// Animate width
|
||||
if (isValidWidthChange) {
|
||||
input.width(newWidth);
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
$.fn.resetAutosize = function(options){
|
||||
// alert(JSON.stringify(options));
|
||||
var minWidth = $(this).data('minwidth') || options.minInputWidth || $(this).width(),
|
||||
maxWidth = $(this).data('maxwidth') || options.maxInputWidth || ($(this).closest('.tagsinput').width() - options.inputPadding),
|
||||
val = '',
|
||||
input = $(this),
|
||||
testSubject = $('<tester/>').css({
|
||||
position: 'absolute',
|
||||
top: -9999,
|
||||
left: -9999,
|
||||
width: 'auto',
|
||||
fontSize: input.css('fontSize'),
|
||||
fontFamily: input.css('fontFamily'),
|
||||
fontWeight: input.css('fontWeight'),
|
||||
letterSpacing: input.css('letterSpacing'),
|
||||
whiteSpace: 'nowrap'
|
||||
}),
|
||||
testerId = $(this).attr('id')+'_autosize_tester';
|
||||
if(! $('#'+testerId).length > 0){
|
||||
testSubject.attr('id', testerId);
|
||||
testSubject.appendTo('body');
|
||||
}
|
||||
|
||||
input.data('minwidth', minWidth);
|
||||
input.data('maxwidth', maxWidth);
|
||||
input.data('tester_id', testerId);
|
||||
input.css('width', minWidth);
|
||||
};
|
||||
|
||||
$.fn.addTag = function(value,options) {
|
||||
var options = jQuery.extend({focus:false,callback:true},options);
|
||||
options = jQuery.extend({focus:false,callback:true},options);
|
||||
this.each(function() {
|
||||
id = $(this).attr('id');
|
||||
|
||||
var id = $(this).attr('id');
|
||||
|
||||
var tagslist = $(this).val().split(delimiter[id]);
|
||||
if (tagslist[0] == '') {
|
||||
tagslist = new Array();
|
||||
@@ -32,11 +86,15 @@
|
||||
value = jQuery.trim(value);
|
||||
|
||||
if (options.unique) {
|
||||
skipTag = $(tagslist).tagExist(value);
|
||||
var skipTag = $(this).tagExist(value);
|
||||
if(skipTag == true) {
|
||||
//Marks fake input as not_valid to let styling it
|
||||
$('#'+id+'_tag').addClass('not_valid');
|
||||
}
|
||||
} else {
|
||||
skipTag = false;
|
||||
var skipTag = false;
|
||||
}
|
||||
|
||||
|
||||
if (value !='' && skipTag != true) {
|
||||
$('<span>').addClass('tag').append(
|
||||
$('<span>').text(value).append(' '),
|
||||
@@ -58,18 +116,19 @@
|
||||
$('#'+id+'_tag').blur();
|
||||
}
|
||||
|
||||
$.fn.tagsInput.updateTagsField(this,tagslist);
|
||||
|
||||
if (options.callback && tags_callbacks[id] && tags_callbacks[id]['onAddTag']) {
|
||||
var f = tags_callbacks[id]['onAddTag'];
|
||||
f(value);
|
||||
f.call(this, value);
|
||||
}
|
||||
if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
|
||||
{
|
||||
var i = tagslist.length;
|
||||
var f = tags_callbacks[id]['onChange'];
|
||||
f($(this), tagslist[i]);
|
||||
f.call(this, $(this), tagslist[i-1]);
|
||||
}
|
||||
}
|
||||
$.fn.tagsInput.updateTagsField(this,tagslist);
|
||||
|
||||
});
|
||||
|
||||
@@ -79,11 +138,10 @@
|
||||
$.fn.removeTag = function(value) {
|
||||
value = unescape(value);
|
||||
this.each(function() {
|
||||
id = $(this).attr('id');
|
||||
var id = $(this).attr('id');
|
||||
|
||||
var old = $(this).val().split(delimiter[id]);
|
||||
|
||||
|
||||
|
||||
$('#'+id+'_tagsinput .tag').remove();
|
||||
str = '';
|
||||
for (i=0; i< old.length; i++) {
|
||||
@@ -96,7 +154,7 @@
|
||||
|
||||
if (tags_callbacks[id] && tags_callbacks[id]['onRemoveTag']) {
|
||||
var f = tags_callbacks[id]['onRemoveTag'];
|
||||
f(value);
|
||||
f.call(this, value);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -104,30 +162,47 @@
|
||||
};
|
||||
|
||||
$.fn.tagExist = function(val) {
|
||||
if (jQuery.inArray(val, $(this)) == -1) {
|
||||
return false; /* Cannot find value in array */
|
||||
} else {
|
||||
return true; /* Value found */
|
||||
}
|
||||
var id = $(this).attr('id');
|
||||
val = val.toLowerCase();
|
||||
var tagslist = $(this).val().toLowerCase().split(delimiter[id]);
|
||||
return (jQuery.inArray(val, tagslist) >= 0); //true when tag exists, false when not
|
||||
};
|
||||
|
||||
|
||||
// clear all existing tags and import new ones from a string
|
||||
$.fn.importTags = function(str) {
|
||||
id = $(this).attr('id');
|
||||
$('#'+id+'_tagsinput .tag').remove();
|
||||
$.fn.tagsInput.importTags(this,str);
|
||||
}
|
||||
|
||||
$.fn.tagsInput = function(options) {
|
||||
var settings = jQuery.extend({interactive:true,defaultText:'add a tag',minChars:0,width:'300px',height:'100px','hide':true,'delimiter':',',autocomplete:{selectFirst:false},'unique':true,removeWithBackspace:true},options);
|
||||
|
||||
var settings = jQuery.extend({
|
||||
interactive:true,
|
||||
defaultText:'add a tag',
|
||||
minChars:0,
|
||||
width:'300px',
|
||||
height:'100px',
|
||||
autocomplete: {selectFirst: false },
|
||||
'hide':true,
|
||||
'delimiter':',',
|
||||
'unique':true,
|
||||
removeWithBackspace:true,
|
||||
placeholderColor:'#666666',
|
||||
autosize: true,
|
||||
comfortZone: 20,
|
||||
inputPadding: 6*2
|
||||
},options);
|
||||
|
||||
this.each(function() {
|
||||
if (settings.hide) {
|
||||
$(this).hide();
|
||||
}
|
||||
|
||||
id = $(this).attr('id')
|
||||
var id = $(this).attr('id');
|
||||
if (!id || delimiter[$(this).attr('id')]) {
|
||||
id = $(this).attr('id', 'tags' + new Date().getTime()).attr('id');
|
||||
}
|
||||
|
||||
data = jQuery.extend({
|
||||
var data = jQuery.extend({
|
||||
pid:id,
|
||||
real_input: '#'+id,
|
||||
holder: '#'+id+'_tagsinput',
|
||||
@@ -135,7 +210,6 @@
|
||||
fake_input: '#'+id+'_tag'
|
||||
},settings);
|
||||
|
||||
|
||||
delimiter[id] = data.delimiter;
|
||||
|
||||
if (settings.onAddTag || settings.onRemoveTag || settings.onChange) {
|
||||
@@ -156,14 +230,16 @@
|
||||
$(markup).insertAfter(this);
|
||||
|
||||
$(data.holder).css('width',settings.width);
|
||||
$(data.holder).css('height',settings.height);
|
||||
$(data.holder).css('min-height',settings.height);
|
||||
$(data.holder).css('height','100%');
|
||||
|
||||
if ($(data.real_input).val()!='') {
|
||||
$.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val());
|
||||
}
|
||||
if (settings.interactive) {
|
||||
$(data.fake_input).val($(data.fake_input).attr('data-default'));
|
||||
$(data.fake_input).css('color','#666666');
|
||||
$(data.fake_input).css('color',settings.placeholderColor);
|
||||
$(data.fake_input).resetAutosize(settings);
|
||||
|
||||
$(data.holder).bind('click',data,function(event) {
|
||||
$(event.data.fake_input).focus();
|
||||
@@ -177,25 +253,27 @@
|
||||
});
|
||||
|
||||
if (settings.autocomplete_url != undefined) {
|
||||
$(data.fake_input).autocomplete(settings.autocomplete_url,settings.autocomplete).bind('result',data,function(event,data,formatted) {
|
||||
if (data)
|
||||
{
|
||||
$(event.data.real_input).addTag(formatted,{focus:true,unique:(settings.unique)});
|
||||
}
|
||||
});
|
||||
autocomplete_options = {source: settings.autocomplete_url};
|
||||
for (attrname in settings.autocomplete) {
|
||||
autocomplete_options[attrname] = settings.autocomplete[attrname];
|
||||
}
|
||||
|
||||
if (jQuery.Autocompleter !== undefined) {
|
||||
$(data.fake_input).autocomplete(settings.autocomplete_url, settings.autocomplete);
|
||||
$(data.fake_input).bind('result',data,function(event,data,formatted) {
|
||||
if (data) {
|
||||
$('#'+id).addTag(data[0] + "",{focus:true,unique:(settings.unique)});
|
||||
}
|
||||
});
|
||||
} else if (jQuery.ui.autocomplete !== undefined) {
|
||||
$(data.fake_input).autocomplete(autocomplete_options);
|
||||
$(data.fake_input).bind('autocompleteselect',data,function(event,ui) {
|
||||
$(event.data.real_input).addTag(ui.item.value,{focus:true,unique:(settings.unique)});
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
$(data.fake_input).bind('blur',data,function(event) {
|
||||
if( $('.ac_results').is(':visible') ) return false;
|
||||
if ( $(event.data.fake_input).val() != $(event.data.fake_input).attr('data-default')) {
|
||||
if((event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)))
|
||||
$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:false,unique:(settings.unique)});
|
||||
}
|
||||
|
||||
$(event.data.fake_input).val($(event.data.fake_input).attr('data-default'));
|
||||
$(event.data.fake_input).css('color','#666666');
|
||||
return false;
|
||||
});
|
||||
|
||||
} else {
|
||||
// if a user tabs out of the field, create a new tag
|
||||
// this is only available if autocomplete is not used.
|
||||
@@ -206,36 +284,49 @@
|
||||
$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)});
|
||||
} else {
|
||||
$(event.data.fake_input).val($(event.data.fake_input).attr('data-default'));
|
||||
$(event.data.fake_input).css('color','#666666');
|
||||
$(event.data.fake_input).css('color',settings.placeholderColor);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
}
|
||||
// if user types a comma, create a new tag
|
||||
$(data.fake_input).bind('keypress',data,function(event) {
|
||||
$(data.fake_input).bind('keypress',data,function(event) {
|
||||
if (event.which==event.data.delimiter.charCodeAt(0) || event.which==13 ) {
|
||||
event.preventDefault();
|
||||
if( (event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)) )
|
||||
$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)});
|
||||
|
||||
$(event.data.fake_input).resetAutosize(settings);
|
||||
return false;
|
||||
}
|
||||
} else if (event.data.autosize) {
|
||||
$(event.data.fake_input).doAutosize(settings);
|
||||
|
||||
}
|
||||
});
|
||||
//Delete last tag on backspace
|
||||
data.removeWithBackspace && $(data.fake_input).bind('keyup', function(event)
|
||||
data.removeWithBackspace && $(data.fake_input).bind('keydown', function(event)
|
||||
{
|
||||
if(event.keyCode == 8 && $(this).val() == '')
|
||||
{
|
||||
event.preventDefault();
|
||||
var last_tag = $(this).closest('.tagsinput').find('.tag:last').text();
|
||||
var id = $(this).attr('id').replace(/_tag$/, '');
|
||||
last_tag = last_tag.replace(/[\s]+x$/, '');
|
||||
$('#' + id).removeTag(escape(last_tag));
|
||||
$(this).trigger('focus');
|
||||
};
|
||||
}
|
||||
});
|
||||
$(data.fake_input).blur();
|
||||
|
||||
//Removes the not_valid class when user changes the value of the fake input
|
||||
if(data.unique) {
|
||||
$(data.fake_input).keydown(function(event){
|
||||
if(event.keyCode == 8 || String.fromCharCode(event.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,/]+/)) {
|
||||
$(this).removeClass('not_valid');
|
||||
}
|
||||
});
|
||||
}
|
||||
} // if settings.interactive
|
||||
return false;
|
||||
});
|
||||
|
||||
return this;
|
||||
@@ -243,13 +334,13 @@
|
||||
};
|
||||
|
||||
$.fn.tagsInput.updateTagsField = function(obj,tagslist) {
|
||||
id = $(obj).attr('id');
|
||||
var id = $(obj).attr('id');
|
||||
$(obj).val(tagslist.join(delimiter[id]));
|
||||
};
|
||||
|
||||
$.fn.tagsInput.importTags = function(obj,val) {
|
||||
$(obj).val('');
|
||||
id = $(obj).attr('id');
|
||||
var id = $(obj).attr('id');
|
||||
var tags = val.split(delimiter[id]);
|
||||
for (i=0; i<tags.length; i++) {
|
||||
$(obj).addTag(tags[i],{focus:false,callback:false});
|
||||
@@ -257,7 +348,7 @@
|
||||
if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
|
||||
{
|
||||
var f = tags_callbacks[id]['onChange'];
|
||||
f(obj, tags[i]);
|
||||
f.call(obj, obj, tags[i]);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -1,58 +0,0 @@
|
||||
<!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" />
|
||||
<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">
|
||||
|
||||
function onAddTag(tag) {
|
||||
alert("Added a tag: " + tag);
|
||||
}
|
||||
function onRemoveTag(tag) {
|
||||
alert("Removed a tag: " + tag);
|
||||
}
|
||||
|
||||
$(function() {
|
||||
$('#tags_1').tagsInput();
|
||||
$('#tags_2').tagsInput({
|
||||
onChange: function(elem, elem_tags)
|
||||
{
|
||||
var languages = ['php','ruby','javascript'];
|
||||
$('.tag', elem_tags).each(function()
|
||||
{
|
||||
if($(this).text().search(new RegExp('\\b(' + languages.join('|') + ')\\b')) >= 0)
|
||||
$(this).css('background-color', 'yellow');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Uncomment this line to see the callback functions in action
|
||||
// $('input.tags').tagsInput({onAddTag:onAddTag,onRemoveTag:onRemoveTag});
|
||||
|
||||
// Uncomment this line to see an input with no interface for adding new tags.
|
||||
// $('input.tags').tagsInput({interactive:false});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
jQuery Tags Input!
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" />
|
||||
|
||||
<label>Technologies: (Programming languages in yellow)</label>
|
||||
<input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" />
|
||||
</form>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
@@ -0,0 +1 @@
|
||||
[ { "id": "Netta rufina", "label": "Red-crested Pochard", "value": "Red-crested Pochard" }, { "id": "Sterna sandvicensis", "label": "Sandwich Tern", "value": "Sandwich Tern" }, { "id": "Saxicola rubetra", "label": "Whinchat", "value": "Whinchat" }, { "id": "Saxicola rubicola", "label": "European Stonechat", "value": "European Stonechat" }, { "id": "Lanius senator", "label": "Woodchat Shrike", "value": "Woodchat Shrike" }, { "id": "Coccothraustes coccothraustes", "label": "Hawfinch", "value": "Hawfinch" }, { "id": "Ficedula hypoleuca", "label": "Eurasian Pied Flycatcher", "value": "Eurasian Pied Flycatcher" }, { "id": "Sitta europaea", "label": "Eurasian Nuthatch", "value": "Eurasian Nuthatch" }, { "id": "Pyrrhula pyrrhula", "label": "Eurasian Bullfinch", "value": "Eurasian Bullfinch" }, { "id": "Muscicapa striata", "label": "Spotted Flycatcher", "value": "Spotted Flycatcher" }, { "id": "Carduelis chloris", "label": "European Greenfinch", "value": "European Greenfinch" }, { "id": "Carduelis carduelis", "label": "European Goldfinch", "value": "European Goldfinch" } ]
|
||||
@@ -0,0 +1,4 @@
|
||||
inky
|
||||
pinky
|
||||
blinky
|
||||
clyde
|
||||
Reference in New Issue
Block a user