How to : jQuery UI Autocomplete - Combobox ( dropdown )

Convert your <select> into beautiful jQuery UI Combobox. Its been fun with jQuery and UI is really cool. This is what i got when finished. ( final output )

You can customize the widget as you want. for this you need jQuery UI , I downloaded my own jQueryUI Theme using Theamroller. You can download default theme or customize it as per your project need, just download it from here.  To do this cool widget i follow following steps.

Step 1:Add Javascripts and CSS to your page

Here i have downloaded 1.8.20 version and using same for this tutorial. For this widget i added few scripts and css style in header section of HTML page.

-------------------------Code Starts----------------------

<link type="text/css" href="css/custom-theme/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>

<script type="text/javascript" src="js/jcombo.js"></script>

<style>

.ui-combobox {

position: relative;

display: inline-block;

}

.ui-button {

position: absolute;

top: 0;

bottom: 0;

margin-left: -1px;

padding: 0;

/* adjust styles for IE 6/7 */

*height: 1.7em;

*top: 0.1em;

}

.ui-autocomplete-input {

margin: 0;

padding: 0.3em;

}

</style>

------------------------Code Ends-----------------------

Step 2: The widget

I added on Javascript file called jcombo.js here for widget. jcombo is not a standard you can name it anything but what it contains is combobox widget for my need. Here is the code in jcombo.js.

------------------------Code Starts-----------------------

// JavaScript Document 

$(document).ready(function() {

$.widget( "ui.combobox", {

_create: function() {

var input,

self = this,

select = this.element.hide(),

selected = select.children( ":selected" ),

value = selected.val() ? selected.text() : "",

wrapper = $( "<span>" )

.addClass( "ui-combobox" )

.insertAfter( select );

input = $( "<input>" )

.appendTo( wrapper )

.val( value )

.addClass( "ui-state-default" )

.autocomplete({

delay: 0,

minLength: 0,

source: function( request, response ) {

var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );

response( select.children( "option" ).map(function() {

var text = $( this ).text();

if ( this.value && ( !request.term || matcher.test(text) ) )

return {

label: text.replace(

new RegExp(

"(?![^&;]+;)(?!<[^<>]*)(" +

$.ui.autocomplete.escapeRegex(request.term) +

")(?![^<>]*>)(?![^&;]+;)", "gi"

), "<strong>$1</strong>" ),

value: text,

option: this

};

}) );

},

select: function( event, ui ) {

ui.item.option.selected = true;

self._trigger( "selected", event, {

item: ui.item.option

});

},

change: function( event, ui ) {

if ( !ui.item ) {

var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),

valid = false;

select.children( "option" ).each(function() {

if ( $( this ).text().match( matcher ) ) {

this.selected = valid = true;

return false;

}

});

if ( !valid ) {

// remove invalid value, as it didn't match anything

$( this ).val( "" );

select.val( "" );

input.data( "autocomplete" ).term = "";

return false;

}

}

}

})

.addClass( "ui-widget ui-widget-content ui-corner-left" );

input.data( "autocomplete" )._renderItem = function( ul, item ) {

return $( "<li></li>" )

.data( "item.autocomplete", item )

.append( "<a>" + item.label + "</a>" )

.appendTo( ul );

};

$( "<a>" )

.attr( "tabIndex", -1 )

.attr( "title", "Show All Items" )

.appendTo( wrapper )

.button({

icons: {

primary: "ui-icon-triangle-1-s"

},

text: false

})

.removeClass( "ui-corner-all" )

.addClass( "ui-corner-right ui-button-icon" )

.click(function() {

// close if already visible

if ( input.autocomplete( "widget" ).is( ":visible" ) ) {

input.autocomplete( "close" );

return;

}

// work around a bug (likely same cause as #5265)

$( this ).blur();

// pass empty string as value to search for, displaying all results

input.autocomplete( "search", "" );

input.focus();

});

},

destroy: function() {

this.wrapper.remove();

this.element.show();

$.Widget.prototype.destroy.call( this );

}

});

});

----------------------Code Ends-------------------------

Step 3: Add select component 

for simple demonstration I've added this to my page and give id as "mycombobox".

----------------------Code Starts-------------------------

<select id="mycombobox">

<option value="Thomas">Thomas Mathew</option>

<option value="Shardul">Shardul Singh</option>

</select>

-------------------------Code Ends----------------------

Step 4: Apply widget 

Now this is time to apply widget to the component. To do so i'm using jQuery and applying this widget to the normal select. This script goes to the header section again of the page.

-------------------------Code Starts----------------------

<script type="text/javascript">

 $("# mycombobox " ).combobox();

});

</script> 

-------------------------Code Ends----------------------

Step 5: Done!!

Just open your page in browser and check ! how cool it is...

Downloadable source link will be soon available...Keep watching.