ui.combobox select hack
http://stackoverflow.com/a/11849719/922168
HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<select name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option...
CSS
.ui-combobox {
position: relative;
display: inline-block;
}
.ui-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* adjust styles for IE 6/7 */
*height: 1.7em;
*top: 0.1em;
}
.ui-combobox-input {
margin: 0;
padding: 0.3em;
}
JavaScript
$.widget("ui.combobox", {
options: {
maxOptionSize: 20,
maxOptionText: "... type to filter",
autoFocus: true,
},
_create: function() {
var self = this,
select = this.element.hide(),
selected = select.children(":selected"),
maxOptionValue = select.children().eq(0).val(),
value = selected.val() ? selected.text() : "";
select.wrap("<div style='float:left;'></div>");
var width = $(select).width();
if (width == 0) width = 100;
if (this.element.attr('disabled') == 'disabled') { /*To handle disabled case */
input = this.input = $("<input type='textbox'>").addClass("textbox").attr("disabled", "disabled").insertAfter(select).val(value).attr("title", value);
return; /*Do not render autocomplete*/
}
var input = this.input = $("<input>").insertAfter(select).val(value).attr("title", value).autocomplete({
delay: 0,
minLength: 0,
source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
var select_el = select.get(0); // get dom element
var rep = new Array(); // response array
input.data("autocomplete").showMaxOption = false;
// simple loop for the options
for (var i = 0; i < select_el.length; i++) {
var text = select_el.options[i].text;
// add element to result array
if (select_el.options[i].value && (!request.term || matcher.test(text))) {
rep.push({
label: text,
//.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
value: text,
option:...