mirror of
https://github.com/wahyd4/jQuery-Tags-Input.git
synced 2026-08-10 05:18:25 +10:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
291739bd50 | ||
|
|
e27248adde | ||
|
|
bc50b025fb | ||
|
|
50a623375d | ||
|
|
b20d10a78f | ||
|
|
b56a968f97 | ||
|
|
7476b8b75f | ||
|
|
51d058c46b | ||
|
|
6d2b1d3b72 | ||
|
|
f8d1362f25 | ||
|
|
78487e0592 | ||
|
|
8d06653aa6 | ||
|
|
ad2889e6a4 | ||
|
|
73c60604f8 | ||
|
|
49fc5f3ab1 | ||
|
|
5437401613 | ||
|
|
55145e9390 | ||
|
|
00a112153c | ||
|
|
53bce4bf40 | ||
|
|
08c91e2f67 | ||
|
|
b8665626c6 | ||
|
|
2f564beaad | ||
|
|
0b7d62a3e1 | ||
|
|
b7d339216d | ||
|
|
fdf650de12 | ||
|
|
dcc33019ec | ||
|
|
fa10428b04 | ||
|
|
37a4fb1e8e | ||
|
|
53ffc5f6ed | ||
|
|
1cc6f5b2f8 | ||
|
|
1b461629fe | ||
|
|
ffac87c585 | ||
|
|
f40465718b | ||
|
|
24832798ae | ||
|
|
af2d7d2e84 | ||
|
|
683637913c |
@@ -1,95 +0,0 @@
|
||||
jQuery Tags Input Plugin 1.3
|
||||
|
||||
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,
|
||||
'placeholderColor' : '#666666'
|
||||
});
|
||||
|
||||
@@ -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'
|
||||
});
|
||||
+21
-26
@@ -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>
|
||||
@@ -25,9 +20,15 @@
|
||||
alert("Removed a tag: " + tag);
|
||||
}
|
||||
|
||||
function onChangeTag(input,tag) {
|
||||
alert("Changed a tag: " + tag);
|
||||
}
|
||||
|
||||
$(function() {
|
||||
$('#tags_1').tagsInput();
|
||||
|
||||
$('#tags_1').tagsInput({width:'auto'});
|
||||
$('#tags_2').tagsInput({
|
||||
width: 'auto',
|
||||
onChange: function(elem, elem_tags)
|
||||
{
|
||||
var languages = ['php','ruby','javascript'];
|
||||
@@ -39,35 +40,29 @@
|
||||
}
|
||||
});
|
||||
$('#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});
|
||||
// $('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>
|
||||
|
||||
</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>
|
||||
@@ -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;}
|
||||
|
||||
+131
-65
@@ -1,6 +1,6 @@
|
||||
/*
|
||||
|
||||
jQuery Tags Input Plugin 1.3
|
||||
jQuery Tags Input Plugin 1.3.3
|
||||
|
||||
Copyright (c) 2011 XOXCO, Inc
|
||||
|
||||
@@ -18,12 +18,65 @@
|
||||
|
||||
var delimiter = new Array();
|
||||
var tags_callbacks = new Array();
|
||||
var gotAutoComplete = false;
|
||||
$.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] == '') {
|
||||
@@ -33,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(' '),
|
||||
@@ -59,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);
|
||||
|
||||
});
|
||||
|
||||
@@ -80,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++) {
|
||||
@@ -97,7 +154,7 @@
|
||||
|
||||
if (tags_callbacks[id] && tags_callbacks[id]['onRemoveTag']) {
|
||||
var f = tags_callbacks[id]['onRemoveTag'];
|
||||
f(value);
|
||||
f.call(this, value);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -105,15 +162,15 @@
|
||||
};
|
||||
|
||||
$.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);
|
||||
}
|
||||
@@ -125,22 +182,27 @@
|
||||
minChars:0,
|
||||
width:'300px',
|
||||
height:'100px',
|
||||
autocomplete: {selectFirst: false },
|
||||
'hide':true,
|
||||
'delimiter':',',
|
||||
autocomplete:{},
|
||||
'unique':true,
|
||||
removeWithBackspace:true,
|
||||
placeholderColor:'#666666'
|
||||
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',
|
||||
@@ -148,7 +210,6 @@
|
||||
fake_input: '#'+id+'_tag'
|
||||
},settings);
|
||||
|
||||
|
||||
delimiter[id] = data.delimiter;
|
||||
|
||||
if (settings.onAddTag || settings.onRemoveTag || settings.onChange) {
|
||||
@@ -169,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',settings.placeholderColor);
|
||||
$(data.fake_input).css('color',settings.placeholderColor);
|
||||
$(data.fake_input).resetAutosize(settings);
|
||||
|
||||
$(data.holder).bind('click',data,function(event) {
|
||||
$(event.data.fake_input).focus();
|
||||
@@ -190,36 +253,27 @@
|
||||
});
|
||||
|
||||
if (settings.autocomplete_url != undefined) {
|
||||
autocomplete_options = {source: settings.autocomplete_url};
|
||||
for (attrname in settings.autocomplete) {
|
||||
autocomplete_options[attrname] = settings.autocomplete[attrname];
|
||||
}
|
||||
|
||||
$(data.fake_input).autocomplete(autocomplete_options).bind('autocompleteselect',data,function(event,ui) {
|
||||
gotAutoComplete = true;
|
||||
$(event.data.real_input).addTag(ui.item.value,{focus:true,unique:(settings.unique)});
|
||||
return false;
|
||||
});
|
||||
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) {
|
||||
setTimeout(function() {
|
||||
if(gotAutoComplete == true) {
|
||||
gotAutoComplete = false;
|
||||
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',settings.placeholderColor);
|
||||
}, 100);
|
||||
return false;
|
||||
});
|
||||
|
||||
} else {
|
||||
// if a user tabs out of the field, create a new tag
|
||||
// this is only available if autocomplete is not used.
|
||||
@@ -237,13 +291,17 @@
|
||||
|
||||
}
|
||||
// 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('keydown', function(event)
|
||||
@@ -256,11 +314,19 @@
|
||||
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;
|
||||
@@ -268,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});
|
||||
@@ -282,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
Reference in New Issue
Block a user