Mercurial > hg > MPIWGThesaurus

comparison jquery-ui/development-bundle/demos/autocomplete/combobox.html @ 0:b2e4605f20b2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
beta version
author dwinter
date Thu, 30 Jun 2011 09:07:49 +0200
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:b2e4605f20b2
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.5.1.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.autocomplete.js"></script>
13 <link rel="stylesheet" href="../demos.css">
14 <style>
15 .ui-button { margin-left: -1px; }
16 .ui-button-icon-only .ui-button-text { padding: 0.35em; }
17 .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
18 </style>
19 <script>
20 (function( $ ) {
21 $.widget( "ui.combobox", {
22 _create: function() {
23 var self = this,
24 select = this.element.hide(),
25 selected = select.children( ":selected" ),
26 value = selected.val() ? selected.text() : "";
27 var input = this.input = $( "<input>" )
28 .insertAfter( select )
29 .val( value )
30 .autocomplete({
31 delay: 0,
32 minLength: 0,
33 source: function( request, response ) {
34 var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
35 response( select.children( "option" ).map(function() {
36 var text = $( this ).text();
37 if ( this.value && ( !request.term || matcher.test(text) ) )
38 return {
39 label: text.replace(
40 new RegExp(
41 "(?![^&;]+;)(?!<[^<>]*)(" +
42 $.ui.autocomplete.escapeRegex(request.term) +
43 ")(?![^<>]*>)(?![^&;]+;)", "gi"
44 ), "<strong>$1</strong>" ),
45 value: text,
46 option: this
47 };
48 }) );
49 },
50 select: function( event, ui ) {
51 ui.item.option.selected = true;
52 self._trigger( "selected", event, {
53 item: ui.item.option
54 });
55 },
56 change: function( event, ui ) {
57 if ( !ui.item ) {
58 var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
59 valid = false;
60 select.children( "option" ).each(function() {
61 if ( $( this ).text().match( matcher ) ) {
62 this.selected = valid = true;
63 return false;
64 }
65 });
66 if ( !valid ) {
67 // remove invalid value, as it didn't match anything
68 $( this ).val( "" );
69 select.val( "" );
70 input.data( "autocomplete" ).term = "";
71 return false;
72 }
73 }
74 }
75 })
76 .addClass( "ui-widget ui-widget-content ui-corner-left" );
77
78 input.data( "autocomplete" )._renderItem = function( ul, item ) {
79 return $( "<li></li>" )
80 .data( "item.autocomplete", item )
81 .append( "<a>" + item.label + "</a>" )
82 .appendTo( ul );
83 };
84
85 this.button = $( "<button type='button'>&nbsp;</button>" )
86 .attr( "tabIndex", -1 )
87 .attr( "title", "Show All Items" )
88 .insertAfter( input )
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-button-icon" )
97 .click(function() {
98 // close if already visible
99 if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
100 input.autocomplete( "close" );
101 return;
102 }
103
104 // pass empty string as value to search for, displaying all results
105 input.autocomplete( "search", "" );
106 input.focus();
107 });
108 },
109
110 destroy: function() {
111 this.input.remove();
112 this.button.remove();
113 this.element.show();
114 $.Widget.prototype.destroy.call( this );
115 }
116 });
117 })( jQuery );
118
119 $(function() {
120 $( "#combobox" ).combobox();
121 $( "#toggle" ).click(function() {
122 $( "#combobox" ).toggle();
123 });
124 });
125 </script>
126 </head>
127 <body>
128
129 <div class="demo">
130
131 <div class="ui-widget">
132 <label>Your preferred programming language: </label>
133 <select id="combobox">
134 <option value="">Select one...</option>
135 <option value="ActionScript">ActionScript</option>
136 <option value="AppleScript">AppleScript</option>
137 <option value="Asp">Asp</option>
138 <option value="BASIC">BASIC</option>
139 <option value="C">C</option>
140 <option value="C++">C++</option>
141 <option value="Clojure">Clojure</option>
142 <option value="COBOL">COBOL</option>
143 <option value="ColdFusion">ColdFusion</option>
144 <option value="Erlang">Erlang</option>
145 <option value="Fortran">Fortran</option>
146 <option value="Groovy">Groovy</option>
147 <option value="Haskell">Haskell</option>
148 <option value="Java">Java</option>
149 <option value="JavaScript">JavaScript</option>
150 <option value="Lisp">Lisp</option>
151 <option value="Perl">Perl</option>
152 <option value="PHP">PHP</option>
153 <option value="Python">Python</option>
154 <option value="Ruby">Ruby</option>
155 <option value="Scala">Scala</option>
156 <option value="Scheme">Scheme</option>
157 </select>
158 </div>
159 <button id="toggle">Show underlying select</button>
160
161 </div><!-- End demo -->
162
163
164
165 <div class="demo-description">
166 <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>
167 <p>The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.</p>
168 </div><!-- End demo-description -->
169
170 </body>
171 </html>