1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>jQuery UI Autocomplete - Combobox</title> 6 <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 7 <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 8 <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 9 <style> 10 .custom-combobox { 11 position: relative; 12 display: inline-block; 13 14 } 15 .custom-combobox-toggle { 16 position: absolute; 17 top: 0; 18 bottom: 0; 19 margin-left: -1px; 20 padding: 0; 21 width:23px; 22 } 23 .custom-combobox-input { 24 margin: 0; 25 padding: 3px 0px; 26 } 27 </style> 28 <script> 29 (function( $ ) { 30 $.widget( "custom.combobox", { 31 _create: function() { 32 this.wrapper = $( "<span>" ) 33 .addClass( "custom-combobox" ) 34 .insertAfter( this.element ); 35 36 this.element.hide(); 37 this._createAutocomplete(); 38 this._createShowAllButton(); 39 }, 40 41 _createAutocomplete: function() { 42 var selected = this.element.children( ":selected" ), 43 value = selected.val() ? selected.text() : ""; 44 45 this.input = $( "<input>" ) 46 .appendTo( this.wrapper ) 47 .val( value ) 48 .attr( "title", "" ) 49 .addClass( "custom-combobox-input ui-widget-content ui-state-default ui-corner-left" ) 50 .autocomplete({ 51 delay: 0, 52 minLength: 0, 53 source: $.proxy( this, "_source" ) 54 }) 55 .tooltip({ 56 tooltipClass: "ui-state-highlight" 57 }); 58 59 this._on( this.input, { 60 autocompleteselect: function( event, ui ) { 61 ui.item.option.selected = true; 62 this._trigger( "select", event, { 63 item: ui.item.option 64 }); 65 }, 66 67 autocompletechange: "_removeIfInvalid" 68 }); 69 }, 70 71 _createShowAllButton: function() { 72 var input = this.input, 73 wasOpen = false; 74 75 $( "<a>" ) 76 .attr( "tabIndex", -1 ) 77 .attr( "title", "Show All Items" ) 78 .tooltip() 79 .appendTo( this.wrapper ) 80 .button({ 81 icons: { 82 primary: "ui-icon-triangle-1-s" 83 }, 84 text: false 85 }) 86 .removeClass( "ui-corner-all" ) 87 .addClass( "custom-combobox-toggle ui-corner-right" ) 88 .mousedown(function() { 89 wasOpen = input.autocomplete( "widget" ).is( ":visible" ); 90 }) 91 .click(function() { 92 input.focus(); 93 94 // Close if already visible 95 if ( wasOpen ) { 96 return; 97 } 98 99 // Pass empty string as value to search for, displaying all results 100 input.autocomplete( "search", "" ); 101 }); 102 }, 103 104 _source: function( request, response ) { 105 var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ); 106 response( this.element.children( "option" ).map(function() { 107 var text = $( this ).text(); 108 if ( this.value && ( !request.term || matcher.test(text) ) ) 109 return { 110 label: text, 111 value: text, 112 option: this 113 }; 114 }) ); 115 }, 116 117 _removeIfInvalid: function( event, ui ) { 118 119 // Selected an item, nothing to do 120 if ( ui.item ) { 121 return; 122 } 123 124 // Search for a match (case-insensitive) 125 var value = this.input.val(), 126 valueLowerCase = value.toLowerCase(), 127 valid = false; 128 this.element.children( "option" ).each(function() { 129 if ( $( this ).text().toLowerCase() === valueLowerCase ) { 130 this.selected = valid = true; 131 return false; 132 } 133 }); 134 135 // Found a match, nothing to do 136 if ( valid ) { 137 return; 138 } 139 140 // Remove invalid value 141 this.input 142 .val( "" ) 143 .attr( "title", value + " didn't match any item" ) 144 .tooltip( "open" ); 145 this.element.val( "" ); 146 this._delay(function() { 147 this.input.tooltip( "close" ).attr( "title", "" ); 148 }, 2500 ); 149 this.input.autocomplete( "instance" ).term = ""; 150 }, 151 152 _destroy: function() { 153 this.wrapper.remove(); 154 this.element.show(); 155 } 156 }); 157 })( jQuery ); 158 159 $(function() { 160 $( "#sub_tea_id_select" ).combobox(); 161 $( "#toggle" ).click(function() { 162 $( "#sub_tea_id_select" ).toggle(); 163 }); 164 }); 165 </script> 166 </head> 167 <body> 168 <center> 169 <div > 170 <label>Your preferred programming language: </label> 171 <select id="sub_tea_id_select"> 172 <option value="00001">00001 李建欣</option> 173 <option value="00002">00002 沃天宇</option> 174 <option value="00003">00003 刘旭东</option> 175 <option value="11001">11001 李未</option> 176 <option value="11002">11002 怀进鹏</option> 177 <option value="11003">11003 呂卫锋</option> 178 <option value="11061032">11061032 魏佳丽</option> 179 </select> 180 </div> 181 <button id="toggle">Show underlying select</button> 182 </center> 183 184 185 </body> 186 </html>