jQuery Tags Input Plugin 改

jquery.tagsinput.js

官方链接 下载

根据jQuery Tags Input Plugin 1.3.3添加如下功能

·新增getTags()方法

·新增4个options[maxCount:0,lowerCase:false,upperCase:false,regex:'']

maxCount：默认值0，不限制tag数量，设定需要限定tag最大个数值

lowerCase：默认值false，若为true，tag转小写

upperCase：默认值false，若为true，tag转大写

regex：默认值空，可设置自定义验证 /^[\u4E00-\u9FA5\w\d\-+#.]+$/ ，英文数字汉字（除全角符号）可用符号（_-#.）

View Code

  1 /*
  2     jQuery Tags Input Plugin 1.3.3    
  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     [email protected]
 12     ----------------------------------------1.3.3 Kai 0.1-------------------------------------------
 13     jQuery Tags Input Plugin 1.3.3 Kai 0.1
 14     what's new
 15     add 1 function[getTags()]
 16     add 4 options default[maxCount:0,lowerCase:false,upperCase:false,regex:'']
 17     fix some error display addClass('not_valid')
 18     2012-11-08 [email protected]
 19     ------------------------------------------------------------------------------------------------
 20 */
 21 
 22 (function($) {
 23     var kaiOptions=new Array();
 24     var delimiter = new Array();
 25     var tags_callbacks = new Array();
 26     $.fn.doAutosize = function(o){
 27         var minWidth = $(this).data('minwidth'),
 28             maxWidth = $(this).data('maxwidth'),
 29             val = '',
 30             input = $(this),
 31             testSubject = $('#'+$(this).data('tester_id'));
 32     
 33         if (val === (val = input.val())) {return;}
 34     
 35         // Enter new content into testSubject
 36         var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(/'<').replace(/>/g, '>');
 37         testSubject.html(escaped);
 38         // Calculate new width + whether to change
 39         var testerWidth = testSubject.width(),
 40             newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
 41             currentWidth = input.width(),
 42             isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
 43                                  || (newWidth > minWidth && newWidth < maxWidth);
 44     
 45         // Animate width
 46         if (isValidWidthChange) {
 47             input.width(newWidth);
 48         }
 49 
 50 
 51   };
 52   $.fn.resetAutosize = function(options){
 53     // alert(JSON.stringify(options));
 54     var minWidth =  $(this).data('minwidth') || options.minInputWidth || $(this).width(),
 55         maxWidth = $(this).data('maxwidth') || options.maxInputWidth || ($(this).closest('.tagsinput').width() - options.inputPadding),
 56         val = '',
 57         input = $(this),
 58         testSubject = $('').css({
 59             position: 'absolute',
 60             top: -9999,
 61             left: -9999,
 62             width: 'auto',
 63             fontSize: input.css('fontSize'),
 64             fontFamily: input.css('fontFamily'),
 65             fontWeight: input.css('fontWeight'),
 66             letterSpacing: input.css('letterSpacing'),
 67             whiteSpace: 'nowrap'
 68         }),
 69         testerId = $(this).attr('id')+'_autosize_tester';
 70     if(! $('#'+testerId).length > 0){
 71       testSubject.attr('id', testerId);
 72       testSubject.appendTo('body');
 73     }
 74 
 75     input.data('minwidth', minWidth);
 76     input.data('maxwidth', maxWidth);
 77     input.data('tester_id', testerId);
 78     input.css('width', minWidth);
 79   };
 80 
 81     $.fn.getTags = function() {
 82         var id = $(this).attr('id');
 83         var tagslist = $(this).val().split(delimiter[id]);
 84         return tagslist;
 85     };
 86 
 87     $.fn.addTag = function(value,options) {
 88             options = jQuery.extend({focus:false,callback:true},options);
 89             this.each(function() { 
 90                 var id = $(this).attr('id');
 91 
 92                 var tagslist = $(this).val().split(delimiter[id]);
 93                 if (tagslist[0] == '') { 
 94                     tagslist = new Array();
 95                 }
 96                             
 97                 var maxCount=kaiOptions[id]['maxCount'];
 98                 if(maxCount>0 && tagslist.length>maxCount-1){
 99                     $('#'+id+'_tag').addClass('not_valid');
100                     return;
101                 }
102                 
103                 var lowerCase=kaiOptions[id]['lowerCase'];
104                 var upperCase=kaiOptions[id]['upperCase'];
105                 
106                 if(lowerCase && upperCase){
107                     value = jQuery.trim(value);
108                 }
109                 else{
110                     if(lowerCase){
111                         value = jQuery.trim(value.toLowerCase());
112                     }
113                     if(upperCase){
114                         value = jQuery.trim(value.toUpperCase());
115                     }
116                 }
117                 
118                 var _reg=kaiOptions[id]['regex'];
119                 if(jQuery.trim(_reg).length>0){
120                     if(!_reg.exec(value)){
121                         $('#'+id+'_tag').addClass('not_valid');
122                         return;    
123                     }
124                 }
125                 
126                 if (options.unique) {
127                     var skipTag = $(this).tagExist(value);
128                     if(skipTag == true) {
129                         //Marks fake input as not_valid to let styling it
130                         $('#'+id+'_tag').addClass('not_valid');
131                     }
132                 } else {
133                     var skipTag = false; 
134                 }                
135                 
136                 if (value !='' && skipTag != true) { 
137                     $('').addClass('tag').append(
138                         $('').text(value).append('  '),
139                         $('', {
140                             href  : '#',
141                             title : 'Removing tag',
142                             text  : 'x'
143                         }).click(function () {
144                             return $('#' + id).removeTag(escape(value));
145                         })
146                     ).insertBefore('#' + id + '_addTag');
147 
148                     tagslist.push(value);
149                 
150                     $('#'+id+'_tag').val('');
151                     if (options.focus) {
152                         $('#'+id+'_tag').focus();
153                     } else {        
154                         $('#'+id+'_tag').blur();
155                     }
156                     
157                     $.fn.tagsInput.updateTagsField(this,tagslist);
158                     
159                     if (options.callback && tags_callbacks[id] && tags_callbacks[id]['onAddTag']) {
160                         var f = tags_callbacks[id]['onAddTag'];
161                         f.call(this, value);
162                     }
163                     if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
164                     {
165                         var i = tagslist.length;
166                         var f = tags_callbacks[id]['onChange'];
167                         f.call(this, $(this), tagslist[i-1]);
168                     }                    
169                 }
170         
171             });        
172             
173             return false;
174         };
175         
176     $.fn.removeTag = function(value) { 
177             value = unescape(value);
178             this.each(function() { 
179                 var id = $(this).attr('id');
180     
181                 var old = $(this).val().split(delimiter[id]);
182                     
183                 $('#'+id+'_tagsinput .tag').remove();
184                 str = '';
185                 for (i=0; i< old.length; i++) { 
186                     if (old[i]!=value) { 
187                         str = str + delimiter[id] +old[i];
188                     }
189                 }
190                 
191                 $.fn.tagsInput.importTags(this,str);
192 
193                 if (tags_callbacks[id] && tags_callbacks[id]['onRemoveTag']) {
194                     var f = tags_callbacks[id]['onRemoveTag'];
195                     f.call(this, value);
196                 }
197             });
198                     
199             return false;
200         };
201     
202     $.fn.tagExist = function(val) {
203         var id = $(this).attr('id');
204         var tagslist = $(this).val().split(delimiter[id]);
205         return (jQuery.inArray(val, tagslist) >= 0); //true when tag exists, false when not
206     };
207     
208     // clear all existing tags and import new ones from a string
209     $.fn.importTags = function(str) {
210         var id = $(this).attr('id');
211         $('#' + id + '_tagsinput .tag').remove();
212         $.fn.tagsInput.importTags(this, str);
213     };
214         
215     $.fn.tagsInput = function(options) { 
216     var settings = jQuery.extend({
217       interactive:true,
218       defaultText:'add a tag',
219       minChars:0,
220       width:'300px',
221       height:'100px',
222       autocomplete: {selectFirst: false },
223       'hide':true,
224       'delimiter':',',
225       'unique':true,
226       removeWithBackspace:true,
227       placeholderColor:'#666666',
228       autosize: true,
229       comfortZone: 20,
230       inputPadding: 6*2,
231       maxCount:0,
232       lowerCase:false,
233       upperCase:false,
234       regex:''
235     },options);
236 
237         this.each(function() { 
238             if (settings.hide) { 
239                 $(this).hide();                
240             }
241             var id = $(this).attr('id');
242             if (!id || delimiter[$(this).attr('id')]) {
243                 id = $(this).attr('id', 'tags' + new Date().getTime()).attr('id');
244             }
245             
246             var data = jQuery.extend({
247                 pid:id,
248                 real_input: '#'+id,
249                 holder: '#'+id+'_tagsinput',
250                 input_wrapper: '#'+id+'_addTag',
251                 fake_input: '#'+id+'_tag'
252             },settings);
253             
254             kaiOptions[id]=new Array();
255             kaiOptions[id]['maxCount']=settings.maxCount;
256             kaiOptions[id]['lowerCase']=settings.lowerCase;
257             kaiOptions[id]['upperCase']=settings.upperCase;
258             kaiOptions[id]['regex']=settings.regex;
259             delimiter[id] = data.delimiter;
260 
261             if (settings.onAddTag || settings.onRemoveTag || settings.onChange) {
262                 tags_callbacks[id] = new Array();
263                 tags_callbacks[id]['onAddTag'] = settings.onAddTag;
264                 tags_callbacks[id]['onRemoveTag'] = settings.onRemoveTag;
265                 tags_callbacks[id]['onChange'] = settings.onChange;
266             }
267     
268             var markup = '
'+id+'_tagsinput" class="tagsinput">
'+id+'_addTag">';
269             
270             if (settings.interactive) {
271                 markup = markup + ''+id+'_tag" value="" data-default="'+settings.defaultText+'" />';
272             }
273             
274             markup = markup + '
';
275             
276             $(markup).insertAfter(this);
277 
278             $(data.holder).css('width',settings.width);
279             $(data.holder).css('min-height',settings.height);
280             $(data.holder).css('height','100%');
281     
282             if ($(data.real_input).val()!='') { 
283                 $.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val());
284             }        
285             if (settings.interactive) { 
286                 $(data.fake_input).val($(data.fake_input).attr('data-default'));
287                 $(data.fake_input).css('color',settings.placeholderColor);
288                 $(data.fake_input).resetAutosize(settings);
289         
290                 $(data.holder).bind('click',data,function(event) {
291                     $(event.data.fake_input).focus();
292                 });
293             
294                 $(data.fake_input).bind('focus',data,function(event) {
295                     if ($(event.data.fake_input).val()==$(event.data.fake_input).attr('data-default')) { 
296                         $(event.data.fake_input).val('');
297                     }
298                     $(event.data.fake_input).css('color','#000000');        
299                 });
300                         
301                 if (settings.autocomplete_url != undefined) {
302                     autocomplete_options = {source: settings.autocomplete_url};
303                     for (attrname in settings.autocomplete) { 
304                         autocomplete_options[attrname] = settings.autocomplete[attrname]; 
305                     }
306                 
307 
308                     if (jQuery.Autocompleter !== undefined) {
309                         $(data.fake_input).autocomplete(settings.autocomplete_url, settings.autocomplete);
310                         $(data.fake_input).bind('result',data,function(event,data,formatted) {
311                             if (data) {
312                                 //$('#'+id).addTag(data[0] + "",{focus:true,unique:(settings.unique)});
313                                 $('#'+id).addTag(data + "",{focus:true,unique:(settings.unique)});
314                             }
315                           });
316                     } else if (jQuery.ui.autocomplete !== undefined) {
317                         $(data.fake_input).autocomplete(autocomplete_options);
318                         $(data.fake_input).bind('autocompleteselect',data,function(event,ui) {
319                             $(event.data.real_input).addTag(ui.item.value,{focus:true,unique:(settings.unique)});
320                             return false;
321                         });
322                     }
323                 
324                     
325                 } else {
326                         // if a user tabs out of the field, create a new tag
327                         // this is only available if autocomplete is not used.
328                         $(data.fake_input).bind('blur',data,function(event) { 
329                             var d = $(this).attr('data-default');
330                             if ($(event.data.fake_input).val()!='' && $(event.data.fake_input).val()!=d) { 
331                                 if( (event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)) )
332                                     $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)});
333                             } else {
334                                 $(event.data.fake_input).val($(event.data.fake_input).attr('data-default'));
335                                 $(event.data.fake_input).css('color',settings.placeholderColor);
336                             }
337                             return false;
338                         });
339                 
340                 }
341                 // if user types a comma, create a new tag
342                 $(data.fake_input).bind('keypress',data,function(event) {
343                     if (event.which==event.data.delimiter.charCodeAt(0) || event.which==13 ) {
344                         event.preventDefault();
345                         if( (event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)) )
346                             $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)});
347                           $(event.data.fake_input).resetAutosize(settings);
348                         return false;
349                     } else if (event.data.autosize) {
350                         $(event.data.fake_input).doAutosize(settings);
351             
352                       }
353                 });
354                 //Delete last tag on backspace
355                 data.removeWithBackspace && $(data.fake_input).bind('keydown', function(event)
356                 {
357                     if(event.keyCode == 8 && $(this).val() == '')
358                     {
359                          event.preventDefault();
360                          var last_tag = $(this).closest('.tagsinput').find('.tag:last').text();
361                          var id = $(this).attr('id').replace(/_tag$/, '');
362                          last_tag = last_tag.replace(/[\s]+x$/, '');
363                          $('#' + id).removeTag(escape(last_tag));
364                          $(this).trigger('focus');
365                     }
366                 });
367                 $(data.fake_input).blur();
368                 
369                 //Removes the not_valid class when user changes the value of the fake input
370                 if(data.unique) {
371                     $(data.fake_input).keydown(function(event){
372                         if(event.keyCode == 8 || String.fromCharCode(event.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,/]+/)) {
373                             $(this).removeClass('not_valid');
374                         }
375                     });
376                 }
377             } // if settings.interactive
378         });
379             
380         return this;
381     
382     };
383     
384     $.fn.tagsInput.updateTagsField = function(obj,tagslist) { 
385         var id = $(obj).attr('id');
386         $(obj).val(tagslist.join(delimiter[id]));
387     };
388     
389     $.fn.tagsInput.importTags = function(obj,val) {            
390         $(obj).val('');
391         var id = $(obj).attr('id');
392         var tags = val.split(delimiter[id]);
393         for (i=0; i) { 
394             $(obj).addTag(tags[i],{focus:false,callback:false});
395         }
396         if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
397         {
398             var f = tags_callbacks[id]['onChange'];
399             f.call(obj, obj, tags[i]);
400         }
401     };
402 
403 })(jQuery);

 

初始化参数

 1  $(selector).tagsInput({
 2     'autocomplete_url': url_to_autocomplete_api,
 3     'autocomplete': { option: value, option: value},
 4     'height':'100px',
 5     'width':'300px',
 6     'interactive':true,
 7     'defaultText':'add a tag',
 8     'onAddTag':callback_function,
 9     'onRemoveTag':callback_function,
10     'onChange' : callback_function,
11     'removeWithBackspace' : true,
12     'minChars' : 0,
13     'maxChars' : 0, //if not provided there is no limit
14     'placeholderColor' : '#666666',
15     'maxCount':20, //tags max count
16     'lowerCase':false,
17     'upperCase':false,
18     'regex':/^[\u4E00-\u9FA5\w\d\-+#.]+$/
19  });

 

获取tags结果集

1 $('#tags_1').getTags();

不通过getTags获取结果集方法

1 function getTags(){
2     var $tagWord =$("#tags_1").siblings(".tagsinput").children(".tag");
3     var tags = [];
4     for (var i = $tagWord.length; i--; ) {
5             tags.push($($tagWord[i]).text().substring(0, $($tagWord[i]).text().length - 1).trim());
6          }
7     var uqTags = $.unique(tags);
8     return ugTags;
9 }

example.html部分代码

View Code

 1     
46         

47             
Defaults:
48             "tags_1" type="text" class="tags" value="foo,bar,baz,roffle" />
49             "result1">result
50             
Technologies: (Programming languages in yellow)
51             "tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" />
52             "result2">result
53             
Autocomplete:
54             'tags_3' type='text' class='tags'>
55             "result2">result
56         

转载于:https://www.cnblogs.com/monsterworks/archive/2012/11/09/2761912.html