demos/autocomplete/combobox.html

<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>jQuery UI Autocomplete - Combobox</title>
        <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
        <script src="../../jquery-1.9.1.js"></script>
        <script src="../../ui/jquery.ui.core.js"></script>
        <script src="../../ui/jquery.ui.widget.js"></script>
        <script src="../../ui/jquery.ui.button.js"></script>
        <script src="../../ui/jquery.ui.position.js"></script>
        <script src="../../ui/jquery.ui.menu.js"></script>
        <script src="../../ui/jquery.ui.autocomplete.js"></script>
        <script src="../../ui/jquery.ui.tooltip.js"></script>
        <link rel="stylesheet" href="../demos.css">
        <style>
        .custom-combobox {
                position: relative;
                display: inline-block;
        }
        .custom-combobox-toggle {
                position: absolute;
                top: 0;
                bottom: 0;
                margin-left: -1px;
                padding: 0;
                /* support: IE7 */
                *height: 1.7em;
                *top: 0.1em;
        }
        .custom-combobox-input {
                margin: 0;
                padding: 0.3em;
        }
        </style>
        <script>
        (function( $ ) {
                $.widget( "custom.combobox", {
                        _create: function() {
                                this.wrapper = $( "<span>" )
                                        .addClass( "custom-combobox" )
                                        .insertAfter( this.element );

                                this.element.hide();
                                this._createAutocomplete();
                                this._createShowAllButton();
                        },

                        _createAutocomplete: function() {
                                var selected = this.element.children( ":selected" ),
                                        value = selected.val() ? selected.text() : "";

                                this.input = $( "<input>" )
                                        .appendTo( this.wrapper )
                                        .val( value )
                                        .attr( "title", "" )
                                        .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
                                        .autocomplete({
                                                delay: 0,
                                                minLength: 0,
                                                source: $.proxy( this, "_source" )
                                        })
                                        .tooltip({
                                                tooltipClass: "ui-state-highlight"
                                        });

                                this._on( this.input, {
                                        autocompleteselect: function( event, ui ) {
                                                ui.item.option.selected = true;
                                                this._trigger( "select", event, {
                                                        item: ui.item.option
                                                });
                                        },

                                        autocompletechange: "_removeIfInvalid"
                                });
                        },

                        _createShowAllButton: function() {
                                var input = this.input,
                                        wasOpen = false;

                                $( "<a>" )
                                        .attr( "tabIndex", -1 )
                                        .attr( "title", "Show All Items" )
                                        .tooltip()
                                        .appendTo( this.wrapper )
                                        .button({
                                                icons: {
                                                        primary: "ui-icon-triangle-1-s"
                                                },
                                                text: false
                                        })
                                        .removeClass( "ui-corner-all" )
                                        .addClass( "custom-combobox-toggle ui-corner-right" )
                                        .mousedown(function() {
                                                wasOpen = input.autocomplete( "widget" ).is( ":visible" );
                                        })
                                        .click(function() {
                                                input.focus();

                                                // Close if already visible
                                                if ( wasOpen ) {
                                                        return;
                                                }

                                                // Pass empty string as value to search for, displaying all results
                                                input.autocomplete( "search", "" );
                                        });
                        },

                        _source: function( request, response ) {
                                var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
                                response( this.element.children( "option" ).map(function() {
                                        var text = $( this ).text();
                                        if ( this.value && ( !request.term || matcher.test(text) ) )
                                                return {
                                                        label: text,
                                                        value: text,
                                                        option: this
                                                };
                                }) );
                        },

                        _removeIfInvalid: function( event, ui ) {

                                // Selected an item, nothing to do
                                if ( ui.item ) {
                                        return;
                                }

                                // Search for a match (case-insensitive)
                                var value = this.input.val(),
                                        valueLowerCase = value.toLowerCase(),
                                        valid = false;
                                this.element.children( "option" ).each(function() {
                                        if ( $( this ).text().toLowerCase() === valueLowerCase ) {
                                                this.selected = valid = true;
                                                return false;
                                        }
                                });

                                // Found a match, nothing to do
                                if ( valid ) {
                                        return;
                                }

                                // Remove invalid value
                                this.input
                                        .val( "" )
                                        .attr( "title", value + " didn't match any item" )
                                        .tooltip( "open" );
                                this.element.val( "" );
                                this._delay(function() {
                                        this.input.tooltip( "close" ).attr( "title", "" );
                                }, 2500 );
                                this.input.data( "ui-autocomplete" ).term = "";
                        },

                        _destroy: function() {
                                this.wrapper.remove();
                                this.element.show();
                        }
                });
        })( jQuery );

        $(function() {
                $( "#combobox" ).combobox();
                $( "#toggle" ).click(function() {
                        $( "#combobox" ).toggle();
                });
        });
        </script>
</head>
<body>

<div class="ui-widget">
        <label>Your preferred programming language: </label>
        <select id="combobox">
                <option value="">Select one...</option>
                <option value="ActionScript">ActionScript</option>
                <option value="AppleScript">AppleScript</option>
                <option value="Asp">Asp</option>
                <option value="BASIC">BASIC</option>
                <option value="C">C</option>
                <option value="C++">C++</option>
                <option value="Clojure">Clojure</option>
                <option value="COBOL">COBOL</option>
                <option value="ColdFusion">ColdFusion</option>
                <option value="Erlang">Erlang</option>
                <option value="Fortran">Fortran</option>
                <option value="Groovy">Groovy</option>
                <option value="Haskell">Haskell</option>
                <option value="Java">Java</option>
                <option value="JavaScript">JavaScript</option>
                <option value="Lisp">Lisp</option>
                <option value="Perl">Perl</option>
                <option value="PHP">PHP</option>
                <option value="Python">Python</option>
                <option value="Ruby">Ruby</option>
                <option value="Scala">Scala</option>
                <option value="Scheme">Scheme</option>
        </select>
</div>
<button id="toggle">Show underlying select</button>

<div class="demo-description">
<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>
<p>The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.</p>
<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>
</div>
</body>
</html>
1	torben	2125	<!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.9.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.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>