|
7
|
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="../../themes/base/jquery.ui.all.css">
|
|
|
7 <script src="../../jquery-1.10.2.js"></script>
|
|
|
8 <script src="../../ui/jquery.ui.core.js"></script>
|
|
|
9 <script src="../../ui/jquery.ui.widget.js"></script>
|
|
|
10 <script src="../../ui/jquery.ui.button.js"></script>
|
|
|
11 <script src="../../ui/jquery.ui.position.js"></script>
|
|
|
12 <script src="../../ui/jquery.ui.menu.js"></script>
|
|
|
13 <script src="../../ui/jquery.ui.autocomplete.js"></script>
|
|
|
14 <script src="../../ui/jquery.ui.tooltip.js"></script>
|
|
|
15 <link rel="stylesheet" href="../demos.css">
|
|
|
16 <style>
|
|
|
17 .custom-combobox {
|
|
|
18 position: relative;
|
|
|
19 display: inline-block;
|
|
|
20 }
|
|
|
21 .custom-combobox-toggle {
|
|
|
22 position: absolute;
|
|
|
23 top: 0;
|
|
|
24 bottom: 0;
|
|
|
25 margin-left: -1px;
|
|
|
26 padding: 0;
|
|
|
27 /* support: IE7 */
|
|
|
28 *height: 1.7em;
|
|
|
29 *top: 0.1em;
|
|
|
30 }
|
|
|
31 .custom-combobox-input {
|
|
|
32 margin: 0;
|
|
|
33 padding: 0.3em;
|
|
|
34 }
|
|
|
35 </style>
|
|
|
36 <script>
|
|
|
37 (function( $ ) {
|
|
|
38 $.widget( "custom.combobox", {
|
|
|
39 _create: function() {
|
|
|
40 this.wrapper = $( "<span>" )
|
|
|
41 .addClass( "custom-combobox" )
|
|
|
42 .insertAfter( this.element );
|
|
|
43
|
|
|
44 this.element.hide();
|
|
|
45 this._createAutocomplete();
|
|
|
46 this._createShowAllButton();
|
|
|
47 },
|
|
|
48
|
|
|
49 _createAutocomplete: function() {
|
|
|
50 var selected = this.element.children( ":selected" ),
|
|
|
51 value = selected.val() ? selected.text() : "";
|
|
|
52
|
|
|
53 this.input = $( "<input>" )
|
|
|
54 .appendTo( this.wrapper )
|
|
|
55 .val( value )
|
|
|
56 .attr( "title", "" )
|
|
|
57 .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
|
|
|
58 .autocomplete({
|
|
|
59 delay: 0,
|
|
|
60 minLength: 0,
|
|
|
61 source: $.proxy( this, "_source" )
|
|
|
62 })
|
|
|
63 .tooltip({
|
|
|
64 tooltipClass: "ui-state-highlight"
|
|
|
65 });
|
|
|
66
|
|
|
67 this._on( this.input, {
|
|
|
68 autocompleteselect: function( event, ui ) {
|
|
|
69 ui.item.option.selected = true;
|
|
|
70 this._trigger( "select", event, {
|
|
|
71 item: ui.item.option
|
|
|
72 });
|
|
|
73 },
|
|
|
74
|
|
|
75 autocompletechange: "_removeIfInvalid"
|
|
|
76 });
|
|
|
77 },
|
|
|
78
|
|
|
79 _createShowAllButton: function() {
|
|
|
80 var input = this.input,
|
|
|
81 wasOpen = false;
|
|
|
82
|
|
|
83 $( "<a>" )
|
|
|
84 .attr( "tabIndex", -1 )
|
|
|
85 .attr( "title", "Show All Items" )
|
|
|
86 .tooltip()
|
|
|
87 .appendTo( this.wrapper )
|
|
|
88 .button({
|
|
|
89 icons: {
|
|
|
90 primary: "ui-icon-triangle-1-s"
|
|
|
91 },
|
|
|
92 text: false
|
|
|
93 })
|
|
|
94 .removeClass( "ui-corner-all" )
|
|
|
95 .addClass( "custom-combobox-toggle ui-corner-right" )
|
|
|
96 .mousedown(function() {
|
|
|
97 wasOpen = input.autocomplete( "widget" ).is( ":visible" );
|
|
|
98 })
|
|
|
99 .click(function() {
|
|
|
100 input.focus();
|
|
|
101
|
|
|
102 // Close if already visible
|
|
|
103 if ( wasOpen ) {
|
|
|
104 return;
|
|
|
105 }
|
|
|
106
|
|
|
107 // Pass empty string as value to search for, displaying all results
|
|
|
108 input.autocomplete( "search", "" );
|
|
|
109 });
|
|
|
110 },
|
|
|
111
|
|
|
112 _source: function( request, response ) {
|
|
|
113 var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
|
|
|
114 response( this.element.children( "option" ).map(function() {
|
|
|
115 var text = $( this ).text();
|
|
|
116 if ( this.value && ( !request.term || matcher.test(text) ) )
|
|
|
117 return {
|
|
|
118 label: text,
|
|
|
119 value: text,
|
|
|
120 option: this
|
|
|
121 };
|
|
|
122 }) );
|
|
|
123 },
|
|
|
124
|
|
|
125 _removeIfInvalid: function( event, ui ) {
|
|
|
126
|
|
|
127 // Selected an item, nothing to do
|
|
|
128 if ( ui.item ) {
|
|
|
129 return;
|
|
|
130 }
|
|
|
131
|
|
|
132 // Search for a match (case-insensitive)
|
|
|
133 var value = this.input.val(),
|
|
|
134 valueLowerCase = value.toLowerCase(),
|
|
|
135 valid = false;
|
|
|
136 this.element.children( "option" ).each(function() {
|
|
|
137 if ( $( this ).text().toLowerCase() === valueLowerCase ) {
|
|
|
138 this.selected = valid = true;
|
|
|
139 return false;
|
|
|
140 }
|
|
|
141 });
|
|
|
142
|
|
|
143 // Found a match, nothing to do
|
|
|
144 if ( valid ) {
|
|
|
145 return;
|
|
|
146 }
|
|
|
147
|
|
|
148 // Remove invalid value
|
|
|
149 this.input
|
|
|
150 .val( "" )
|
|
|
151 .attr( "title", value + " didn't match any item" )
|
|
|
152 .tooltip( "open" );
|
|
|
153 this.element.val( "" );
|
|
|
154 this._delay(function() {
|
|
|
155 this.input.tooltip( "close" ).attr( "title", "" );
|
|
|
156 }, 2500 );
|
|
|
157 this.input.data( "ui-autocomplete" ).term = "";
|
|
|
158 },
|
|
|
159
|
|
|
160 _destroy: function() {
|
|
|
161 this.wrapper.remove();
|
|
|
162 this.element.show();
|
|
|
163 }
|
|
|
164 });
|
|
|
165 })( jQuery );
|
|
|
166
|
|
|
167 $(function() {
|
|
|
168 $( "#combobox" ).combobox();
|
|
|
169 $( "#toggle" ).click(function() {
|
|
|
170 $( "#combobox" ).toggle();
|
|
|
171 });
|
|
|
172 });
|
|
|
173 </script>
|
|
|
174 </head>
|
|
|
175 <body>
|
|
|
176
|
|
|
177 <div class="ui-widget">
|
|
|
178 <label>Your preferred programming language: </label>
|
|
|
179 <select id="combobox">
|
|
|
180 <option value="">Select one...</option>
|
|
|
181 <option value="ActionScript">ActionScript</option>
|
|
|
182 <option value="AppleScript">AppleScript</option>
|
|
|
183 <option value="Asp">Asp</option>
|
|
|
184 <option value="BASIC">BASIC</option>
|
|
|
185 <option value="C">C</option>
|
|
|
186 <option value="C++">C++</option>
|
|
|
187 <option value="Clojure">Clojure</option>
|
|
|
188 <option value="COBOL">COBOL</option>
|
|
|
189 <option value="ColdFusion">ColdFusion</option>
|
|
|
190 <option value="Erlang">Erlang</option>
|
|
|
191 <option value="Fortran">Fortran</option>
|
|
|
192 <option value="Groovy">Groovy</option>
|
|
|
193 <option value="Haskell">Haskell</option>
|
|
|
194 <option value="Java">Java</option>
|
|
|
195 <option value="JavaScript">JavaScript</option>
|
|
|
196 <option value="Lisp">Lisp</option>
|
|
|
197 <option value="Perl">Perl</option>
|
|
|
198 <option value="PHP">PHP</option>
|
|
|
199 <option value="Python">Python</option>
|
|
|
200 <option value="Ruby">Ruby</option>
|
|
|
201 <option value="Scala">Scala</option>
|
|
|
202 <option value="Scheme">Scheme</option>
|
|
|
203 </select>
|
|
|
204 </div>
|
|
|
205 <button id="toggle">Show underlying select</button>
|
|
|
206
|
|
|
207 <div class="demo-description">
|
|
|
208 <p>A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.</p>
|
|
|
209 <p>The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.</p>
|
|
|
210 <p>This is not a supported or even complete widget. Its purely for demoing what autocomplete can do with a bit of customization. <a href="http://www.learningjquery.com/2010/06/a-jquery-ui-combobox-under-the-hood">For a detailed explanation of how the widget works, check out this Learning jQuery article.</a></p>
|
|
|
211 </div>
|
|
|
212 </body>
|
|
|
213 </html>
|
