1
1
/*
2
2
* jQuery Plugin: Tokenizing Autocomplete Text Entry
3
- * Version 1.6.0
3
+ * Version 1.6.1
4
4
*
5
5
* Copyright (c) 2009 James Smith (http://loopj.com)
6
6
* Licensed jointly under the GPL and MIT licenses,
@@ -30,6 +30,7 @@ var DEFAULT_SETTINGS = {
30
30
searchingText : "Searching..." ,
31
31
deleteText : "×" ,
32
32
animateDropdown : true ,
33
+ placeholder : null ,
33
34
theme : null ,
34
35
zindex : 999 ,
35
36
resultsLimit : null ,
@@ -54,6 +55,7 @@ var DEFAULT_SETTINGS = {
54
55
55
56
// Behavioral settings
56
57
allowFreeTagging : false ,
58
+ allowTabOut : false ,
57
59
58
60
// Callbacks
59
61
onResult : null ,
@@ -167,7 +169,7 @@ var methods = {
167
169
$ ( this ) . data ( "settings" , $ . extend ( { } , $ ( this ) . data ( "settings" ) , options || { } ) ) ;
168
170
return this ;
169
171
}
170
- }
172
+ } ;
171
173
172
174
// Expose the .tokenInput function to jQuery as a plugin
173
175
$ . fn . tokenInput = function ( method ) {
@@ -251,14 +253,12 @@ $.TokenList = function (input, url_or_data, settings) {
251
253
} )
252
254
. blur ( function ( ) {
253
255
hide_dropdown ( ) ;
254
- $ ( this ) . val ( "" ) ;
255
- token_list . removeClass ( $ ( input ) . data ( "settings" ) . classes . focused ) ;
256
-
256
+
257
257
if ( $ ( input ) . data ( "settings" ) . allowFreeTagging ) {
258
258
add_freetagging_tokens ( ) ;
259
- } else {
260
- $ ( this ) . val ( "" ) ;
261
259
}
260
+
261
+ $ ( this ) . val ( "" ) ;
262
262
token_list . removeClass ( $ ( input ) . data ( "settings" ) . classes . focused ) ;
263
263
} )
264
264
. bind ( "keyup keydown blur update" , resize_input )
@@ -334,9 +334,16 @@ $.TokenList = function (input, url_or_data, settings) {
334
334
hidden_input . change ( ) ;
335
335
} else {
336
336
if ( $ ( input ) . data ( "settings" ) . allowFreeTagging ) {
337
- add_freetagging_tokens ( ) ;
337
+ if ( $ ( input ) . data ( "settings" ) . allowTabOut && $ ( this ) . val ( ) === "" ) {
338
+ return true ;
339
+ } else {
340
+ add_freetagging_tokens ( ) ;
341
+ }
338
342
} else {
339
343
$ ( this ) . val ( "" ) ;
344
+ if ( $ ( input ) . data ( "settings" ) . allowTabOut ) {
345
+ return true ;
346
+ }
340
347
}
341
348
event . stopPropagation ( ) ;
342
349
event . preventDefault ( ) ;
@@ -356,6 +363,10 @@ $.TokenList = function (input, url_or_data, settings) {
356
363
}
357
364
} ) ;
358
365
366
+ // Keep reference for placeholder
367
+ if ( settings . placeholder )
368
+ input_box . attr ( "placeholder" , settings . placeholder )
369
+
359
370
// Keep a reference to the original input box
360
371
var hidden_input = $ ( input )
361
372
. hide ( )
@@ -440,6 +451,7 @@ $.TokenList = function (input, url_or_data, settings) {
440
451
$ . each ( li_data , function ( index , value ) {
441
452
insert_token ( value ) ;
442
453
checkTokenLimit ( ) ;
454
+ input_box . attr ( "placeholder" , null )
443
455
} ) ;
444
456
}
445
457
@@ -463,11 +475,11 @@ $.TokenList = function (input, url_or_data, settings) {
463
475
delete_token ( $ ( this ) ) ;
464
476
}
465
477
} ) ;
466
- }
478
+ } ;
467
479
468
480
this . add = function ( item ) {
469
481
add_token ( item ) ;
470
- }
482
+ } ;
471
483
472
484
this . remove = function ( item ) {
473
485
token_list . children ( "li" ) . each ( function ( ) {
@@ -485,15 +497,18 @@ $.TokenList = function (input, url_or_data, settings) {
485
497
}
486
498
}
487
499
} ) ;
488
- }
500
+ } ;
489
501
490
502
this . getTokens = function ( ) {
491
503
return saved_tokens ;
492
- }
504
+ } ;
493
505
494
506
this . toggleDisabled = function ( disable ) {
495
507
toggleDisabled ( disable ) ;
496
- }
508
+ } ;
509
+
510
+ // Resize input to maximum width so the placeholder can be seen
511
+ resize_input ( ) ;
497
512
498
513
//
499
514
// Private functions
@@ -531,9 +546,13 @@ $.TokenList = function (input, url_or_data, settings) {
531
546
function resize_input ( ) {
532
547
if ( input_val === ( input_val = input_box . val ( ) ) ) { return ; }
533
548
549
+ // Get width left on the current line
550
+ var width_left = token_list . width ( ) - input_box . offset ( ) . left - token_list . offset ( ) . left ;
534
551
// Enter new content into resizer and resize input accordingly
535
552
input_resizer . html ( _escapeHTML ( input_val ) ) ;
536
- input_box . width ( input_resizer . width ( ) + 30 ) ;
553
+ // Get maximum width, minimum the size of input and maximum the widget's width
554
+ input_box . width ( Math . min ( token_list . width ( ) ,
555
+ Math . max ( width_left , input_resizer . width ( ) + 30 ) ) ) ;
537
556
}
538
557
539
558
function is_printable_character ( keycode ) {
@@ -615,7 +634,7 @@ $.TokenList = function (input, url_or_data, settings) {
615
634
token_list . children ( ) . each ( function ( ) {
616
635
var existing_token = $ ( this ) ;
617
636
var existing_data = $ . data ( existing_token . get ( 0 ) , "tokeninput" ) ;
618
- if ( existing_data && existing_data . id === item . id ) {
637
+ if ( existing_data && existing_data [ settings . tokenValue ] === item [ settings . tokenValue ] ) {
619
638
found_existing_token = existing_token ;
620
639
return false ;
621
640
}
@@ -629,9 +648,14 @@ $.TokenList = function (input, url_or_data, settings) {
629
648
}
630
649
}
631
650
651
+ // Squeeze input_box so we force no unnecessary line break
652
+ input_box . width ( 0 ) ;
653
+
632
654
// Insert the new tokens
633
655
if ( $ ( input ) . data ( "settings" ) . tokenLimit == null || token_count < $ ( input ) . data ( "settings" ) . tokenLimit ) {
634
656
insert_token ( item ) ;
657
+ // Remove the placeholder so it's not seen after you've added a token
658
+ input_box . attr ( "placeholder" , null )
635
659
checkTokenLimit ( ) ;
636
660
}
637
661
@@ -714,6 +738,9 @@ $.TokenList = function (input, url_or_data, settings) {
714
738
715
739
// Remove this token from the saved list
716
740
saved_tokens = saved_tokens . slice ( 0 , index ) . concat ( saved_tokens . slice ( index + 1 ) ) ;
741
+ if ( saved_tokens . length == 0 ) {
742
+ input_box . attr ( "placeholder" , settings . placeholder )
743
+ }
717
744
if ( index < selected_token_index ) selected_token_index -- ;
718
745
719
746
// Update the hidden input
@@ -756,7 +783,7 @@ $.TokenList = function (input, url_or_data, settings) {
756
783
dropdown
757
784
. css ( {
758
785
position : "absolute" ,
759
- top : $ ( token_list ) . offset ( ) . top + $ ( token_list ) . outerHeight ( ) ,
786
+ top : $ ( token_list ) . offset ( ) . top + $ ( token_list ) . height ( ) ,
760
787
left : $ ( token_list ) . offset ( ) . left ,
761
788
width : $ ( token_list ) . width ( ) ,
762
789
'z-index' : $ ( input ) . data ( "settings" ) . zindex
@@ -1013,3 +1040,4 @@ $.TokenList.Cache = function (options) {
1013
1040
} ;
1014
1041
} ;
1015
1042
} ( jQuery ) ) ;
1043
+
0 commit comments