×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: Javascript
Posted by: Jing Tai Piao
Added: Mar 25, 2013 5:39 AM
Views: 31
Tags: no tags
  1.   (function( $ ) {
  2. $.widget( "ui.timecombobox", {
  3.   _create: function() {
  4.     var input,
  5.       that = this,
  6.       wasOpen = false,
  7.       select = this.element.hide(),
  8.       selected = select.children( ":selected" ),
  9.       value = selected.val() ? selected.text() : "",
  10.       wrapper = this.wrapper = $( "<span>" )
  11.         .addClass( "ui-combobox" )
  12.         .insertAfter( select );
  13.  
  14.     function removeIfInvalid( element ) {
  15.       var value = $( element ).val(),
  16.         matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i" ),
  17.         valid = false;
  18.       select.children( "option" ).each(function() {
  19.         if ( $( this ).text().match( matcher ) ) {
  20.           this.selected = valid = true;
  21.           return false;
  22.         }
  23.       });
  24.  
  25.       if ( !valid ) {
  26.         // remove invalid value, as it didn't match anything
  27.         $( element )
  28.           .val( "" )
  29.           .attr( "title", value + " didn't match any item" )
  30.           .tooltip( "open" );
  31.         select.val( "" );
  32.         setTimeout(function() {
  33.           input.tooltip( "close" ).attr( "title", "" );
  34.         }, 2500 );
  35.         input.data( "ui-autocomplete" ).term = "";
  36.       }
  37.     }
  38.  
  39.     input = $( "<input>" )
  40.       .appendTo( wrapper )
  41.       .val( value )
  42.       .attr( "title", "" )
  43.       .addClass( "ui-state-default ui-combobox-input" )
  44.       .autocomplete({
  45.         delay: 0,
  46.         minLength: 0,
  47.         source: function( request, response ) {
  48.           var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
  49.           response( select.children( "option" ).map(function() {
  50.             var text = $( this ).text();
  51.             if ( this.value && ( !request.term || matcher.test(text) ) )
  52.               return {
  53.                 label: text.replace(
  54.                   new RegExp(
  55.                     "(?![^&;]+;)(?!<[^<>]*)(" +
  56.                     $.ui.autocomplete.escapeRegex(request.term) +
  57.                     ")(?![^<>]*>)(?![^&;]+;)", "gi"
  58.                   ), "<strong>$1</strong>" ),
  59.                 value: text,
  60.                 option: this
  61.               };
  62.           }) );
  63.         },
  64.         select: function( event, ui ) {
  65.           ui.item.option.selected = true;
  66.           that._trigger( "selected", event, {
  67.             item: ui.item.option
  68.           });
  69.         },
  70.         change: function( event, ui ) {
  71.           if ( !ui.item ) {
  72.             removeIfInvalid( this );
  73.           }
  74.         }
  75.       })
  76.       .addClass( "ui-widget ui-widget-content ui-corner-left" );
  77.  
  78.     input.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  79.       return $( "<li>" )
  80.         .append( "<a>" + item.label + "</a>" )
  81.         .appendTo( ul );
  82.     };
  83.  
  84.     $( "<a>" )
  85.       .attr( "tabIndex", -1 )
  86.       .attr( "title", "Show All Items" )
  87.       .tooltip()
  88.       .appendTo( wrapper )
  89.       .button({
  90.         icons: {
  91.           primary: "ui-icon-triangle-1-s"
  92.         },
  93.         text: false
  94.       })
  95.       .removeClass( "ui-corner-all" )
  96.       .addClass( "ui-corner-right ui-combobox-toggle" )
  97.       .mousedown(function() {
  98.         wasOpen = input.autocomplete( "widget" ).is( ":visible" );
  99.       })
  100.       .click(function() {
  101.         input.focus();
  102.  
  103.         // close if already visible
  104.         if ( wasOpen ) {
  105.           return;
  106.         }
  107.  
  108.         // pass empty string as value to search for, displaying all results
  109.         input.autocomplete( "search", "" );
  110.       });
  111.  
  112.     input.tooltip({
  113.       tooltipClass: "ui-state-highlight"
  114.     });
  115.   },
  116.  
  117.   _destroy: function() {
  118.     this.wrapper.remove();
  119.     this.element.show();
  120.   }
  121. });
  122.   })( jQuery );