I am using a slightly modified version of the combobox jQuery widget. The problem I am having is that the mouse click doesn't work as I had expected. I want a mouseclick on the input to highlight the contents of the input. This doesn't bring focus to the input, like I wanted. Here is what I have:
(function($) {
$.widget("ui.combobox", {
_create: function() {
var self = this;
var select = this.element.hide();
var input = $("<input >")
.insertAfter(select)
.autocomplete({
source: function(request, response) {
var matcher = new RegExp(request.term, "i");
response(select.children("option").map(function() {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text) || matcher.test(this.value))) //I wanted to be able to search on the values in the text box as well.
return {
id: this.value,
label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
value: text
};
}));
},
delay: 0,
change: function(event, ui) {
if (!ui.item) {
// remove invalid value, as it didn't match anything
$(this).val("");
return false;
}
select.val(ui.item.id);
self._trigger("selected", event, {
item: select.find("[value='" + ui.item.id + "']")
});
},
minLength: 0,
focus: function(event, ui) {
$(this).select(); //This doesn't bring focus on a mouseclick like I would expect.
}
})
.addClass("ui-helper-reset ui-widget ui-widget-content");
$("<button></button>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.insertAfter(input)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
}).removeClass("ui-corner-all ui-state-default ui-button-icon-only")
.addClass("ui-helper-reset ")
.click(function() {
// close if already visible
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();input.select();
});
}
});
})(jQuery);