corrade-http-templates – Blame information for rev 62

Subversion Repositories:
Rev:
Rev Author Line No. Line
62 office 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>jQuery UI Autocomplete - Combobox</title>
7 <link rel="stylesheet" href="../../themes/base/all.css">
8 <link rel="stylesheet" href="../demos.css">
9 <style>
10 .custom-combobox {
11 position: relative;
12 display: inline-block;
13 }
14 .custom-combobox-toggle {
15 position: absolute;
16 top: 0;
17 bottom: 0;
18 margin-left: -1px;
19 padding: 0;
20 }
21 .custom-combobox-input {
22 margin: 0;
23 padding: 5px 10px;
24 }
25 </style>
26 <script src="../../external/requirejs/require.js"></script>
27 <script src="../bootstrap.js" data-modules="tooltip button">
28 $.widget( "custom.combobox", {
29 _create: function() {
30 this.wrapper = $( "<span>" )
31 .addClass( "custom-combobox" )
32 .insertAfter( this.element );
33  
34 this.element.hide();
35 this._createAutocomplete();
36 this._createShowAllButton();
37 },
38  
39 _createAutocomplete: function() {
40 var selected = this.element.children( ":selected" ),
41 value = selected.val() ? selected.text() : "";
42  
43 this.input = $( "<input>" )
44 .appendTo( this.wrapper )
45 .val( value )
46 .attr( "title", "" )
47 .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
48 .autocomplete({
49 delay: 0,
50 minLength: 0,
51 source: $.proxy( this, "_source" )
52 })
53 .tooltip({
54 classes: {
55 "ui-tooltip": "ui-state-highlight"
56 }
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 .on( "mousedown", function() {
89 wasOpen = input.autocomplete( "widget" ).is( ":visible" );
90 })
91 .on( "click", function() {
92 input.trigger( "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  
158 $( "#combobox" ).combobox();
159 $( "#toggle" ).on( "click", function() {
160 $( "#combobox" ).toggle();
161 });
162 </script>
163 </head>
164 <body>
165  
166 <div class="ui-widget">
167 <label>Your preferred programming language: </label>
168 <select id="combobox">
169 <option value="">Select one...</option>
170 <option value="ActionScript">ActionScript</option>
171 <option value="AppleScript">AppleScript</option>
172 <option value="Asp">Asp</option>
173 <option value="BASIC">BASIC</option>
174 <option value="C">C</option>
175 <option value="C++">C++</option>
176 <option value="Clojure">Clojure</option>
177 <option value="COBOL">COBOL</option>
178 <option value="ColdFusion">ColdFusion</option>
179 <option value="Erlang">Erlang</option>
180 <option value="Fortran">Fortran</option>
181 <option value="Groovy">Groovy</option>
182 <option value="Haskell">Haskell</option>
183 <option value="Java">Java</option>
184 <option value="JavaScript">JavaScript</option>
185 <option value="Lisp">Lisp</option>
186 <option value="Perl">Perl</option>
187 <option value="PHP">PHP</option>
188 <option value="Python">Python</option>
189 <option value="Ruby">Ruby</option>
190 <option value="Scala">Scala</option>
191 <option value="Scheme">Scheme</option>
192 </select>
193 </div>
194 <button id="toggle">Show underlying select</button>
195  
196 <div class="demo-description">
197 <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>
198 <p>The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.</p>
199 <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>
200 </div>
201 </body>
202 </html>