"Autocomplete combobox"
Bootstrap 3.0.0 Snippet by paananen

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <br /> <div class="container"> <div class="row"> <div class="ui-widget"> <label>Procedure: </label> <select id="combobox"> <option></option> <option value="Ultrasound Knee Right">Ultrasound Knee Right</option> <option value="Ultrasound Knee Left">Ultrasound Knee Left</option> <option value="Ultrasound Forearm/Elbow Right">Ultrasound Forearm/ Elbow Right</option> <option value="Ultrasound Forearm/Elbow Left">Ultrasound Forearm/Elbow Left</option> <option value="MRI Knee Right">MRI Knee Right</option> <option value="MRI Knee Left">MRI Knee Left</option> <option value="MRI Forearm/Elbow Right">MRI Forearm/Elbow Right</option> <option value="MRI Forearm/Elbow Left">MRI Forearm/Elbow Left</option> <option value="CT Knee Right">CT Knee Right</option> <option value="CT Knee Left">CT Knee Left</option> <option value="CT Forearm/Elbow Right">CT Forearm/Elbow Right</option> <option value="CT Forearm/Elbow Left">CT Forearm/Elbow Left</option> </select> </div> </div> </div>
.custom-combobox { position: relative; display: inline-block; } .custom-combobox-toggle { position: absolute; top: 0; bottom: 0; margin-left: -1px; padding: 0; } .custom-combobox-input { margin: 0; padding-top: 2px; padding-bottom: 5px; padding-right: 5px; }
$( 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({ classes: { "ui-tooltip": "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" ) .attr( "height", "" ) .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" ) .on( "mousedown", function() { wasOpen = input.autocomplete( "widget" ).is( ":visible" ); }) .on( "click", function() { input.trigger( "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.autocomplete( "instance" ).term = ""; }, _destroy: function() { this.wrapper.remove(); this.element.show(); } }); $( "#combobox" ).combobox(); $( "#toggle" ).on( "click", function() { $( "#combobox" ).toggle(); }); } );

Related: See More


Questions / Comments:

Is it possible to change the color of the elements(Options) in the autocomplete drop down

mudithaf (-4) - 4 years ago - Reply 1


Is it possible to increase the length of the text box

mudithaf (-4) - 5 years ago - Reply -2


You can add a style attribute to the input javascript like so:

this.input = $( "<input>" )

.appendTo( this.wrapper )

.val( value )

.attr( "title", "" )

.attr( "style", "width: 600px;" )

.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({

classes: {

"ui-tooltip": "ui-state-highlight"

}

});

paananen () - 5 years ago - Reply 0


Thanks, It is working

mudithaf (-4) - 5 years ago - Reply 0


Is it possible to set a default value onload, eg. CT Knee Right

mudithaf (-4) - 5 years ago - Reply -3


How to add scroll bar in this drop down ?

pgpatel () - 4 years ago - Reply 0