portal/static/js/jquery-ui-combobox.js

   1 (function( $ ) {
   2     $.widget( "custom.combobox", {
   3       _create: function() {
   4         this.wrapper = $( "<span>" )
   5           .addClass( "custom-combobox" )
   6           .insertAfter( this.element );
   7
   8         this.element.hide();
   9         this._createAutocomplete();
  10         this._createShowAllButton();
  11       },
  12
  13       _createAutocomplete: function() {
  14         var selected = this.element.children( ":selected" ),
  15           value = selected.val() ? selected.text() : "";
  16
  17         this.input = $( "<input>" )
  18           .appendTo( this.wrapper )
  19           .val( value )
  20           .attr( "title", "" )
  21           .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
  22           .autocomplete({
  23             delay: 0,
  24             minLength: 0,
  25             source: $.proxy( this, "_source" )
  26           })
  27           .tooltip({
  28             tooltipClass: "ui-state-highlight"
  29           });
  30
  31         this._on( this.input, {
  32           autocompleteselect: function( event, ui ) {
  33             ui.item.option.selected = true;
  34             this._trigger( "select", event, {
  35               item: ui.item.option
  36             });
  37           },
  38
  39           autocompletechange: "_removeIfInvalid"
  40         });
  41       },
  42
  43       _createShowAllButton: function() {
  44         var input = this.input,
  45           wasOpen = false;
  46
  47         $( "<a>" )
  48           .attr( "tabIndex", -1 )
  49           .attr( "title", "Show All Items" )
  50           .tooltip()
  51           .appendTo( this.wrapper )
  52           .button({
  53             icons: {
  54               primary: "ui-icon-triangle-1-s"
  55             },
  56             text: false
  57           })
  58           .removeClass( "ui-corner-all" )
  59           .addClass( "custom-combobox-toggle ui-corner-right" )
  60           .mousedown(function() {
  61             wasOpen = input.autocomplete( "widget" ).is( ":visible" );
  62           })
  63           .click(function() {
  64             input.focus();
  65
  66             // Close if already visible
  67             if ( wasOpen ) {
  68               return;
  69             }
  70
  71             // Pass empty string as value to search for, displaying all results
  72             input.autocomplete( "search", "" );
  73           });
  74       },
  75
  76       _source: function( request, response ) {
  77         var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
  78         response( this.element.children( "option" ).map(function() {
  79           var text = $( this ).text();
  80           if ( this.value && ( !request.term || matcher.test(text) ) )
  81             return {
  82               label: text,
  83               value: text,
  84               option: this
  85             };
  86         }) );
  87       },
  88
  89       _removeIfInvalid: function( event, ui ) {
  90
  91         // Selected an item, nothing to do
  92         if ( ui.item ) {
  93           return;
  94         }
  95
  96         // Search for a match (case-insensitive)
  97         var value = this.input.val(),
  98           valueLowerCase = value.toLowerCase(),
  99           valid = false;
 100         this.element.children( "option" ).each(function() {
 101           if ( $( this ).text().toLowerCase() === valueLowerCase ) {
 102             this.selected = valid = true;
 103             return false;
 104           }
 105         });
 106
 107         // Found a match, nothing to do
 108         if ( valid ) {
 109           return;
 110         }
 111
 112         // Remove invalid value
 113         this.input
 114           .val( "" )
 115           .attr( "title", value + " didn't match any item" )
 116           .tooltip( "open" );
 117         this.element.val( "" );
 118         this._delay(function() {
 119           this.input.tooltip( "close" ).attr( "title", "" );
 120         }, 2500 );
 121         this.input.autocomplete( "instance" ).term = "";
 122       },
 123
 124       _destroy: function() {
 125         this.wrapper.remove();
 126         this.element.show();
 127       }
 128     });
 129   })( jQuery );