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>
