media/jquery.tokeninput.js

   1 /*
   2  * jQuery Plugin: Tokenizing Autocomplete Text Entry
   3  * Version 1.1
   4  *
   5  * Copyright (c) 2009 James Smith (http://loopj.com)
   6  * Licensed jointly under the GPL and MIT licenses,
   7  * choose which one suits your project best!
   8  *
   9  */
  10
  11 (function($) {
  12
  13 $.fn.tokenInput = function (url, options) {
  14     var settings = $.extend({
  15         url: url,
  16         hintText: "Type in a search term",
  17         noResultsText: "No results",
  18         searchingText: "Searching...",
  19         searchDelay: 300,
  20         minChars: 1,
  21         tokenLimit: null,
  22         jsonContainer: null,
  23         method: "GET",
  24         contentType: "json",
  25         queryParam: "q",
  26         onResult: null
  27     }, options);
  28
  29     settings.classes = $.extend({
  30         tokenList: "token-input-list",
  31         token: "token-input-token",
  32         tokenDelete: "token-input-delete-token",
  33         selectedToken: "token-input-selected-token",
  34         highlightedToken: "token-input-highlighted-token",
  35         dropdown: "token-input-dropdown",
  36         dropdownItem: "token-input-dropdown-item",
  37         dropdownItem2: "token-input-dropdown-item2",
  38         selectedDropdownItem: "token-input-selected-dropdown-item",
  39         inputToken: "token-input-input-token"
  40     }, options.classes);
  41
  42     return this.each(function () {
  43         var list = new $.TokenList(this, settings);
  44     });
  45 };
  46
  47 $.TokenList = function (input, settings) {
  48     //
  49     // Variables
  50     //
  51
  52     // Input box position "enum"
  53     var POSITION = {
  54         BEFORE: 0,
  55         AFTER: 1,
  56         END: 2
  57     };
  58
  59     // Keys "enum"
  60     var KEY = {
  61         BACKSPACE: 8,
  62         TAB: 9,
  63         RETURN: 13,
  64         ESC: 27,
  65         LEFT: 37,
  66         UP: 38,
  67         RIGHT: 39,
  68         DOWN: 40,
  69         COMMA: 188
  70     };
  71
  72     // Save the tokens
  73     var saved_tokens = [];
  74
  75     // Keep track of the number of tokens in the list
  76     var token_count = 0;
  77
  78     // Basic cache to save on db hits
  79     var cache = new $.TokenList.Cache();
  80
  81     // Keep track of the timeout
  82     var timeout;
  83
  84     // Create a new text input an attach keyup events
  85     var input_box = $("<input type=\"text\">")
  86         .css({
  87             outline: "none"
  88         })
  89         .focus(function () {
  90             if (settings.tokenLimit == null || settings.tokenLimit != token_count) {
  91                 show_dropdown_hint();
  92             }
  93         })
  94         .blur(function () {
  95             hide_dropdown();
  96         })
  97         .keydown(function (event) {
  98             var previous_token;
  99             var next_token;
 100
 101             switch(event.keyCode) {
 102                 case KEY.LEFT:
 103                 case KEY.RIGHT:
 104                 case KEY.UP:
 105                 case KEY.DOWN:
 106                     if(!$(this).val()) {
 107                         previous_token = input_token.prev();
 108                         next_token = input_token.next();
 109
 110                         if((previous_token.length && previous_token.get(0) === selected_token) || (next_token.length && next_token.get(0) === selected_token)) {
 111                             // Check if there is a previous/next token and it is selected
 112                             if(event.keyCode == KEY.LEFT || event.keyCode == KEY.UP) {
 113                                 deselect_token($(selected_token), POSITION.BEFORE);
 114                             } else {
 115                                 deselect_token($(selected_token), POSITION.AFTER);
 116                             }
 117                         } else if((event.keyCode == KEY.LEFT || event.keyCode == KEY.UP) && previous_token.length) {
 118                             // We are moving left, select the previous token if it exists
 119                             select_token($(previous_token.get(0)));
 120                         } else if((event.keyCode == KEY.RIGHT || event.keyCode == KEY.DOWN) && next_token.length) {
 121                             // We are moving right, select the next token if it exists
 122                             select_token($(next_token.get(0)));
 123                         }
 124                     } else {
 125                         var dropdown_item = null;
 126
 127                         if(event.keyCode == KEY.DOWN || event.keyCode == KEY.RIGHT) {
 128                             dropdown_item = $(selected_dropdown_item).next();
 129                         } else {
 130                             dropdown_item = $(selected_dropdown_item).prev();
 131                         }
 132
 133                         if(dropdown_item.length) {
 134                             select_dropdown_item(dropdown_item);
 135                         }
 136                         return false;
 137                     }
 138                     break;
 139
 140                 case KEY.BACKSPACE:
 141                     previous_token = input_token.prev();
 142
 143                     if(!$(this).val().length) {
 144                         if(selected_token) {
 145                             delete_token($(selected_token));
 146                         } else if(previous_token.length) {
 147                             select_token($(previous_token.get(0)));
 148                         }
 149
 150                         return false;
 151                     } else if($(this).val().length == 1) {
 152                         hide_dropdown();
 153                     } else {
 154                         // set a timeout just long enough to let this function finish.
 155                         setTimeout(function(){do_search(false);}, 5);
 156                     }
 157                     break;
 158
 159                 case KEY.TAB:
 160                 case KEY.RETURN:
 161                 case KEY.COMMA:
 162                   if(selected_dropdown_item) {
 163                     add_token($(selected_dropdown_item));
 164                     return false;
 165                   }
 166                   break;
 167
 168                 case KEY.ESC:
 169                   hide_dropdown();
 170                   return true;
 171
 172                 default:
 173                     if(is_printable_character(event.keyCode)) {
 174                       // set a timeout just long enough to let this function finish.
 175                       setTimeout(function(){do_search(false);}, 5);
 176                     }
 177                     break;
 178             }
 179         });
 180
 181     // Keep a reference to the original input box
 182     var hidden_input = $(input)
 183                            .hide()
 184                            .focus(function () {
 185                                input_box.focus();
 186                            })
 187                            .blur(function () {
 188                                input_box.blur();
 189                            });
 190
 191     // Keep a reference to the selected token and dropdown item
 192     var selected_token = null;
 193     var selected_dropdown_item = null;
 194
 195     // The list to store the token items in
 196     var token_list = $("<ul />")
 197         .addClass(settings.classes.tokenList)
 198         .insertAfter(hidden_input)
 199         .click(function (event) {
 200             var li = get_element_from_event(event, "li");
 201             if(li && li.get(0) != input_token.get(0)) {
 202                 toggle_select_token(li);
 203                 return false;
 204             } else {
 205                 input_box.focus();
 206
 207                 if(selected_token) {
 208                     deselect_token($(selected_token), POSITION.END);
 209                 }
 210             }
 211         })
 212         .mouseover(function (event) {
 213             var li = get_element_from_event(event, "li");
 214             if(li && selected_token !== this) {
 215                 li.addClass(settings.classes.highlightedToken);
 216             }
 217         })
 218         .mouseout(function (event) {
 219             var li = get_element_from_event(event, "li");
 220             if(li && selected_token !== this) {
 221                 li.removeClass(settings.classes.highlightedToken);
 222             }
 223         })
 224         .mousedown(function (event) {
 225             // Stop user selecting text on tokens
 226             var li = get_element_from_event(event, "li");
 227             if(li){
 228                 return false;
 229             }
 230         });
 231
 232
 233     // The list to store the dropdown items in
 234     var dropdown = $("<div>")
 235         .addClass(settings.classes.dropdown)
 236         .insertAfter(token_list)
 237         .hide();
 238
 239     // The token holding the input box
 240     var input_token = $("<li />")
 241         .addClass(settings.classes.inputToken)
 242         .appendTo(token_list)
 243         .append(input_box);
 244
 245     init_list();
 246
 247     //
 248     // Functions
 249     //
 250
 251
 252     // Pre-populate list if items exist
 253     function init_list () {
 254         li_data = settings.prePopulate;
 255         if(li_data && li_data.length) {
 256             for(var i in li_data) {
 257                 var this_token = $("<li><p>"+li_data[i].name+"</p> </li>")
 258                     .addClass(settings.classes.token)
 259                     .insertBefore(input_token);
 260
 261                 $("<span>x</span>")
 262                     .addClass(settings.classes.tokenDelete)
 263                     .appendTo(this_token)
 264                     .click(function () {
 265                         delete_token($(this).parent());
 266                         return false;
 267                     });
 268
 269                 $.data(this_token.get(0), "tokeninput", {"id": li_data[i].id, "name": li_data[i].name});
 270
 271                 // Clear input box and make sure it keeps focus
 272                 input_box
 273                     .val("")
 274                     .focus();
 275
 276                 // Don't show the help dropdown, they've got the idea
 277                 hide_dropdown();
 278
 279                 // Save this token id
 280                 var id_string = li_data[i].id + ","
 281                 hidden_input.val(hidden_input.val() + id_string);
 282             }
 283         }
 284     }
 285
 286     function is_printable_character(keycode) {
 287         if((keycode >= 48 && keycode <= 90) ||      // 0-1a-z
 288            (keycode >= 96 && keycode <= 111) ||     // numpad 0-9 + - / * .
 289            (keycode >= 186 && keycode <= 192) ||    // ; = , - . / ^
 290            (keycode >= 219 && keycode <= 222)       // ( \ ) '
 291           ) {
 292               return true;
 293           } else {
 294               return false;
 295           }
 296     }
 297
 298     // Get an element of a particular type from an event (click/mouseover etc)
 299     function get_element_from_event (event, element_type) {
 300         var target = $(event.target);
 301         var element = null;
 302
 303         if(target.is(element_type)) {
 304             element = target;
 305         } else if(target.parent(element_type).length) {
 306             element = target.parent(element_type+":first");
 307         }
 308
 309         return element;
 310     }
 311
 312     // Inner function to a token to the list
 313     function insert_token(id, value) {
 314       var this_token = $("<li><p>"+ value +"</p> </li>")
 315       .addClass(settings.classes.token)
 316       .insertBefore(input_token);
 317
 318       // The 'delete token' button
 319       $("<span>x</span>")
 320           .addClass(settings.classes.tokenDelete)
 321           .appendTo(this_token)
 322           .click(function () {
 323               delete_token($(this).parent());
 324               return false;
 325           });
 326
 327       $.data(this_token.get(0), "tokeninput", {"id": id, "name": value});
 328
 329       return this_token;
 330     }
 331
 332     // Add a token to the token list based on user input
 333     function add_token (item) {
 334         var li_data = $.data(item.get(0), "tokeninput");
 335         var this_token = insert_token(li_data.id, li_data.name);
 336
 337         // Clear input box and make sure it keeps focus
 338         input_box
 339             .val("")
 340             .focus();
 341
 342         // Don't show the help dropdown, they've got the idea
 343         hide_dropdown();
 344
 345         // Save this token id
 346         var id_string = li_data.id + ","
 347         hidden_input.val(hidden_input.val() + id_string);
 348
 349         token_count++;
 350
 351         if(settings.tokenLimit != null && settings.tokenLimit >= token_count) {
 352             input_box.hide();
 353             hide_dropdown();
 354         }
 355     }
 356
 357     // Select a token in the token list
 358     function select_token (token) {
 359         token.addClass(settings.classes.selectedToken);
 360         selected_token = token.get(0);
 361
 362         // Hide input box
 363         input_box.val("");
 364
 365         // Hide dropdown if it is visible (eg if we clicked to select token)
 366         hide_dropdown();
 367     }
 368
 369     // Deselect a token in the token list
 370     function deselect_token (token, position) {
 371         token.removeClass(settings.classes.selectedToken);
 372         selected_token = null;
 373
 374         if(position == POSITION.BEFORE) {
 375             input_token.insertBefore(token);
 376         } else if(position == POSITION.AFTER) {
 377             input_token.insertAfter(token);
 378         } else {
 379             input_token.appendTo(token_list);
 380         }
 381
 382         // Show the input box and give it focus again
 383         input_box.focus();
 384     }
 385
 386     // Toggle selection of a token in the token list
 387     function toggle_select_token (token) {
 388         if(selected_token == token.get(0)) {
 389             deselect_token(token, POSITION.END);
 390         } else {
 391             if(selected_token) {
 392                 deselect_token($(selected_token), POSITION.END);
 393             }
 394             select_token(token);
 395         }
 396     }
 397
 398     // Delete a token from the token list
 399     function delete_token (token) {
 400         // Remove the id from the saved list
 401         var token_data = $.data(token.get(0), "tokeninput");
 402
 403         // Delete the token
 404         token.remove();
 405         selected_token = null;
 406
 407         // Show the input box and give it focus again
 408         input_box.focus();
 409
 410         // Delete this token's id from hidden input
 411         var str = hidden_input.val()
 412         var start = str.indexOf(token_data.id+",");
 413         var end = str.indexOf(",", start) + 1;
 414
 415         if(end >= str.length) {
 416             hidden_input.val(str.slice(0, start));
 417         } else {
 418             hidden_input.val(str.slice(0, start) + str.slice(end, str.length));
 419         }
 420
 421         token_count--;
 422
 423         if (settings.tokenLimit != null) {
 424             input_box
 425                 .show()
 426                 .val("")
 427                 .focus();
 428         }
 429     }
 430
 431     // Hide and clear the results dropdown
 432     function hide_dropdown () {
 433         dropdown.hide().empty();
 434         selected_dropdown_item = null;
 435     }
 436
 437     function show_dropdown_searching () {
 438         dropdown
 439             .html("<p>"+settings.searchingText+"</p>")
 440             .show();
 441     }
 442
 443     function show_dropdown_hint () {
 444         dropdown
 445             .html("<p>"+settings.hintText+"</p>")
 446             .show();
 447     }
 448
 449     // Highlight the query part of the search term
 450         function highlight_term(value, term) {
 451                 return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<b>$1</b>");
 452         }
 453
 454     // Populate the results dropdown with some results
 455     function populate_dropdown (query, results) {
 456         if(results.length) {
 457             dropdown.empty();
 458             var dropdown_ul = $("<ul>")
 459                 .appendTo(dropdown)
 460                 .mouseover(function (event) {
 461                     select_dropdown_item(get_element_from_event(event, "li"));
 462                 })
 463                 .mousedown(function (event) {
 464                     add_token(get_element_from_event(event, "li"));
 465                     return false;
 466                 })
 467                 .hide();
 468
 469             for(var i in results) {
 470                 if (results.hasOwnProperty(i)) {
 471                     var this_li = $("<li>"+highlight_term(results[i].name, query)+"</li>")
 472                                       .appendTo(dropdown_ul);
 473
 474                     if(i%2) {
 475                         this_li.addClass(settings.classes.dropdownItem);
 476                     } else {
 477                         this_li.addClass(settings.classes.dropdownItem2);
 478                     }
 479
 480                     if(i == 0) {
 481                         select_dropdown_item(this_li);
 482                     }
 483
 484                     $.data(this_li.get(0), "tokeninput", {"id": results[i].id, "name": results[i].name});
 485                 }
 486             }
 487
 488             dropdown.show();
 489             dropdown_ul.slideDown("fast");
 490
 491         } else {
 492             dropdown
 493                 .html("<p>"+settings.noResultsText+"</p>")
 494                 .show();
 495         }
 496     }
 497
 498     // Highlight an item in the results dropdown
 499     function select_dropdown_item (item) {
 500         if(item) {
 501             if(selected_dropdown_item) {
 502                 deselect_dropdown_item($(selected_dropdown_item));
 503             }
 504
 505             item.addClass(settings.classes.selectedDropdownItem);
 506             selected_dropdown_item = item.get(0);
 507         }
 508     }
 509
 510     // Remove highlighting from an item in the results dropdown
 511     function deselect_dropdown_item (item) {
 512         item.removeClass(settings.classes.selectedDropdownItem);
 513         selected_dropdown_item = null;
 514     }
 515
 516     // Do a search and show the "searching" dropdown if the input is longer
 517     // than settings.minChars
 518     function do_search(immediate) {
 519         var query = input_box.val().toLowerCase();
 520
 521         if (query && query.length) {
 522             if(selected_token) {
 523                 deselect_token($(selected_token), POSITION.AFTER);
 524             }
 525             if (query.length >= settings.minChars) {
 526                 show_dropdown_searching();
 527                 if (immediate) {
 528                     run_search(query);
 529                 } else {
 530                     clearTimeout(timeout);
 531                     timeout = setTimeout(function(){run_search(query);}, settings.searchDelay);
 532                 }
 533             } else {
 534                 hide_dropdown();
 535             }
 536         }
 537     }
 538
 539     // Do the actual search
 540     function run_search(query) {
 541         var cached_results = cache.get(query);
 542         if(cached_results) {
 543             populate_dropdown(query, cached_results);
 544         } else {
 545                         var queryStringDelimiter = settings.url.indexOf("?") < 0 ? "?" : "&";
 546                         var callback = function(results) {
 547                           if($.isFunction(settings.onResult)) {
 548                               results = settings.onResult.call(this, results);
 549                           }
 550               cache.add(query, settings.jsonContainer ? results[settings.jsonContainer] : results);
 551               populate_dropdown(query, settings.jsonContainer ? results[settings.jsonContainer] : results);
 552             };
 553
 554             if(settings.method == "POST") {
 555                             $.post(settings.url + queryStringDelimiter + settings.queryParam + "=" + query, {}, callback, settings.contentType);
 556                     } else {
 557                         $.get(settings.url + queryStringDelimiter + settings.queryParam + "=" + query, {}, callback, settings.contentType);
 558                     }
 559         }
 560     }
 561 };
 562
 563 // Really basic cache for the results
 564 $.TokenList.Cache = function (options) {
 565     var settings = $.extend({
 566         max_size: 50
 567     }, options);
 568
 569     var data = {};
 570     var size = 0;
 571
 572     var flush = function () {
 573         data = {};
 574         size = 0;
 575     };
 576
 577     this.add = function (query, results) {
 578         if(size > settings.max_size) {
 579             flush();
 580         }
 581
 582         if(!data[query]) {
 583             size++;
 584         }
 585
 586         data[query] = results;
 587     };
 588
 589     this.get = function (query) {
 590         return data[query];
 591     };
 592 };
 593
 594 })(jQuery);