Commit 74a91f4bdee91bc793343255e6fabe322f28259d
1 parent
16c07fb9
Exists in
master
and in
29 other branches
Fix version of token input
From https://github.com/brauliobo/jquery-tokeninput
Showing
1 changed file
with
53 additions
and
38 deletions
Show diff stats
public/javascripts/jquery.tokeninput.js
1 | 1 | /* |
2 | 2 | * jQuery Plugin: Tokenizing Autocomplete Text Entry |
3 | 3 | * Version 1.5.0 |
4 | + * Requires jQuery 1.6+ | |
4 | 5 | * |
5 | 6 | * Copyright (c) 2009 James Smith (http://loopj.com) |
6 | 7 | * Licensed jointly under the GPL and MIT licenses, |
... | ... | @@ -18,6 +19,7 @@ var DEFAULT_SETTINGS = { |
18 | 19 | searchDelay: 300, |
19 | 20 | minChars: 1, |
20 | 21 | permanentDropdown: false, |
22 | + showAllResults: false, | |
21 | 23 | tokenLimit: null, |
22 | 24 | jsonContainer: null, |
23 | 25 | method: "GET", |
... | ... | @@ -170,17 +172,20 @@ $.TokenList = function (input, url_or_data, options) { |
170 | 172 | .attr("id", settings.idPrefix + input.id) |
171 | 173 | .focus(function () { |
172 | 174 | if (settings.tokenLimit === null || settings.tokenLimit !== token_count) { |
173 | - if(settings.permanentDropdown) | |
175 | + if(settings.permanentDropdown || settings.showAllResults) { | |
174 | 176 | hide_dropdown_hint(); |
175 | - else | |
177 | + } else | |
176 | 178 | show_dropdown_hint(); |
179 | + if (settings.showAllResults) | |
180 | + do_search(); | |
177 | 181 | } |
178 | 182 | }) |
179 | 183 | .blur(function () { |
180 | 184 | if(settings.permanentDropdown) |
181 | 185 | show_dropdown_hint(); |
182 | - else | |
186 | + else { | |
183 | 187 | hide_dropdown(); |
188 | + } | |
184 | 189 | }) |
185 | 190 | .bind("keyup keydown blur update", resize_input) |
186 | 191 | .keydown(function (event) { |
... | ... | @@ -235,9 +240,10 @@ $.TokenList = function (input, url_or_data, options) { |
235 | 240 | previous_token = input_token.prev(); |
236 | 241 | next_token = input_token.next(); |
237 | 242 | |
238 | - if(!$(this).val().length) { | |
243 | + if(!$(this).val().length && settings.backspaceDeleteItem) { | |
239 | 244 | if(selected_token) { |
240 | 245 | delete_token($(selected_token)); |
246 | + input_box.focus(); | |
241 | 247 | } else if(KEY.DELETE && next_token.length) { |
242 | 248 | select_token($(next_token.get(0))); |
243 | 249 | } else if(KEY.BACKSPACE && previous_token.length) { |
... | ... | @@ -259,6 +265,7 @@ $.TokenList = function (input, url_or_data, options) { |
259 | 265 | case KEY.COMMA: |
260 | 266 | if(selected_dropdown_item) { |
261 | 267 | add_token($(selected_dropdown_item).data("tokeninput")); |
268 | + input_box.focus(); | |
262 | 269 | return false; |
263 | 270 | } |
264 | 271 | break; |
... | ... | @@ -305,8 +312,9 @@ $.TokenList = function (input, url_or_data, options) { |
305 | 312 | deselect_token($(selected_token), POSITION.END); |
306 | 313 | } |
307 | 314 | |
308 | - // Focus input box | |
309 | - input_box.focus(); | |
315 | + // Transfer focus | |
316 | + if (!input_box.is(':focus')) | |
317 | + input_box.focus(); | |
310 | 318 | } |
311 | 319 | }) |
312 | 320 | .mouseover(function (event) { |
... | ... | @@ -336,13 +344,17 @@ $.TokenList = function (input, url_or_data, options) { |
336 | 344 | dropdown.appendTo("body"); |
337 | 345 | if (!settings.permanentDropdown) |
338 | 346 | dropdown.appendTo("body"); |
339 | - else { | |
347 | + else | |
340 | 348 | $(input).after(dropdown.show()); |
341 | - do_search(); | |
349 | + | |
350 | + if (settings.permanentDropdown || settings.showAllResults) { | |
351 | + do_search(); | |
352 | + if (!settings.permanentDropdown && settings.showAllResults) | |
353 | + hide_dropdown(); | |
342 | 354 | } |
343 | 355 | |
344 | 356 | // Hint for permanentDropdown |
345 | - if(settings.permanentDropdown) | |
357 | + if (settings.permanentDropdown || settings.showAllResults) | |
346 | 358 | show_dropdown_hint(); |
347 | 359 | |
348 | 360 | // Magic element to help us resize the text input |
... | ... | @@ -430,7 +442,7 @@ $.TokenList = function (input, url_or_data, options) { |
430 | 442 | input_resizer.html(escaped); |
431 | 443 | input_box.width(input_resizer.width() + 30); |
432 | 444 | |
433 | - if(settings.permanentDropdown && input_box.hasClass(settings.classes.blurText)) | |
445 | + if((settings.permanentDropdown || settings.showAllResults) && input_box.hasClass(settings.classes.blurText)) | |
434 | 446 | input_val = ''; |
435 | 447 | } |
436 | 448 | |
... | ... | @@ -497,7 +509,6 @@ $.TokenList = function (input, url_or_data, options) { |
497 | 509 | if(found_existing_token) { |
498 | 510 | select_token(found_existing_token); |
499 | 511 | input_token.insertAfter(found_existing_token); |
500 | - input_box.focus(); | |
501 | 512 | return; |
502 | 513 | } |
503 | 514 | } |
... | ... | @@ -578,9 +589,6 @@ $.TokenList = function (input, url_or_data, options) { |
578 | 589 | token.remove(); |
579 | 590 | selected_token = null; |
580 | 591 | |
581 | - // Show the input box and give it focus again | |
582 | - input_box.focus(); | |
583 | - | |
584 | 592 | // Remove this token from the saved list |
585 | 593 | saved_tokens = saved_tokens.slice(0,index).concat(saved_tokens.slice(index+1)); |
586 | 594 | if(index < selected_token_index) selected_token_index--; |
... | ... | @@ -593,12 +601,8 @@ $.TokenList = function (input, url_or_data, options) { |
593 | 601 | |
594 | 602 | token_count -= 1; |
595 | 603 | |
596 | - if(settings.tokenLimit !== null) { | |
597 | - input_box | |
598 | - .show() | |
599 | - .val("") | |
600 | - .focus(); | |
601 | - } | |
604 | + if(settings.tokenLimit !== null) | |
605 | + input_box.show().val(""); | |
602 | 606 | |
603 | 607 | // Execute the onDelete callback if defined |
604 | 608 | if($.isFunction(callback)) { |
... | ... | @@ -609,27 +613,27 @@ $.TokenList = function (input, url_or_data, options) { |
609 | 613 | // Hide and clear the results dropdown |
610 | 614 | function hide_dropdown () { |
611 | 615 | if (!settings.permanentDropdown) { |
612 | - dropdown.hide().empty(); | |
616 | + dropdown.hide(); | |
617 | + if (!settings.showAllResults) | |
618 | + dropdown.empty(); | |
613 | 619 | selected_dropdown_item = null; |
614 | 620 | } |
621 | + if (settings.showAllResults) | |
622 | + show_dropdown_hint(); | |
615 | 623 | } |
616 | 624 | |
617 | 625 | function show_dropdown() { |
618 | 626 | if (!settings.permanentDropdown) |
619 | - dropdown | |
620 | - .css({ | |
621 | - position: "absolute", | |
622 | - top: $(token_list).offset().top + $(token_list).outerHeight(), | |
623 | - left: $(token_list).offset().left, | |
624 | - zindex: 999 | |
625 | - }) | |
626 | - .show(); | |
627 | + dropdown.css({ | |
628 | + position: "absolute", | |
629 | + top: $(token_list).offset().top + $(token_list).outerHeight(), | |
630 | + left: $(token_list).offset().left, | |
631 | + zindex: 999 | |
632 | + }).show(); | |
627 | 633 | else |
628 | - dropdown | |
629 | - .css({ | |
630 | - position: "relative", | |
631 | - }) | |
632 | - .show(); | |
634 | + dropdown.css({ | |
635 | + position: "relative", | |
636 | + }).show(); | |
633 | 637 | } |
634 | 638 | |
635 | 639 | function show_dropdown_searching () { |
... | ... | @@ -641,10 +645,10 @@ $.TokenList = function (input, url_or_data, options) { |
641 | 645 | |
642 | 646 | function show_dropdown_hint () { |
643 | 647 | if(settings.hintText) { |
644 | - if(settings.permanentDropdown) { | |
648 | + if(settings.permanentDropdown || settings.showAllResults) { | |
645 | 649 | if (input_val == '') { |
646 | 650 | input_box.val(settings.hintText); |
647 | - input_box.toggleClass(settings.classes.blurText); | |
651 | + input_box.addClass(settings.classes.blurText); | |
648 | 652 | } |
649 | 653 | } else { |
650 | 654 | dropdown.html("<p>"+settings.hintText+"</p>"); |
... | ... | @@ -656,7 +660,7 @@ $.TokenList = function (input, url_or_data, options) { |
656 | 660 | function hide_dropdown_hint () { |
657 | 661 | if (input_box.hasClass(settings.classes.blurText)) { |
658 | 662 | input_box.val(''); |
659 | - input_box.toggleClass(settings.classes.blurText); | |
663 | + input_box.removeClass(settings.classes.blurText); | |
660 | 664 | } |
661 | 665 | } |
662 | 666 | |
... | ... | @@ -676,6 +680,7 @@ $.TokenList = function (input, url_or_data, options) { |
676 | 680 | }) |
677 | 681 | .mousedown(function (event) { |
678 | 682 | add_token($(event.target).closest("li").data("tokeninput")); |
683 | + input_box.blur(); | |
679 | 684 | return false; |
680 | 685 | }) |
681 | 686 | .hide(); |
... | ... | @@ -721,6 +726,16 @@ $.TokenList = function (input, url_or_data, options) { |
721 | 726 | |
722 | 727 | item.addClass(settings.classes.selectedDropdownItem); |
723 | 728 | selected_dropdown_item = item.get(0); |
729 | + | |
730 | + isBefore = item[0].offsetTop <= (dropdown[0].scrollTop + dropdown[0].scrollWidth); | |
731 | + isAfter = item[0].offsetTop >= dropdown[0].scrollTop; | |
732 | + visible = isBefore && isAfter; | |
733 | + if (!visible) { | |
734 | + if (isBefore) | |
735 | + dropdown[0].scrollTop = item[0].offsetTop; | |
736 | + else //isAfter | |
737 | + dropdown[0].scrollTop = item[0].offsetTop - dropdown[0].scrollWidth; | |
738 | + } | |
724 | 739 | } |
725 | 740 | } |
726 | 741 | |
... | ... | @@ -750,7 +765,7 @@ $.TokenList = function (input, url_or_data, options) { |
750 | 765 | } else { |
751 | 766 | hide_dropdown(); |
752 | 767 | } |
753 | - } else if (settings.permanentDropdown) | |
768 | + } else if (settings.permanentDropdown || settings.showAllResults) | |
754 | 769 | run_search(''); |
755 | 770 | } |
756 | 771 | ... | ... |