Mercurial > hg > ismi-richfaces

comparison src/main/webapp/imageServer/resources/js/jquery-ui-1.10.4/demos/autocomplete/combobox.html @ 7:764f47286679

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
(none)
author jurzua
date Wed, 29 Oct 2014 14:28:34 +0000
parents
children
comparison
equal deleted inserted replaced
6:ded3bccf2cf9 7:764f47286679
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>