Question

I am currently using the Jquery-UI auto-complete plugin combobox implementation, but i changed the script so that the input element added by the plugin is disabled (the user cannot write in the input, he can only click the button in order to view the options) like this :

$.widget("ui.combobox", {

_create: function () {
    var self = this,
                    select = this.element.hide(),
                    selected = select.children(":selected"),
                    value = selected.val() ? $.trim(selected.text()) : "";
    var input = this.input = $("<input>")
                .attr("name", select.attr("name"))
                .attr('disabled', true)
                .insertAfter(select)
                .val(value)
                .autocomplete({ .......

Probably because the input is disabled, the combo-box doesn’t hide after i lose focus by clicking on empty space, or clicking on another combo box (the input element has the blur event handler, but it doesn’t fire).

Is there a way to set a blur event on a input element that is disabled or any way of hiding the combo-box when a user wants to lose focus?

Answer 1

I would rethink your strategy a bit. Autocomplete is not designed to work on a disabled input. Instead, I would use readonly. Replace:

.attr("disabled", true)

with:

.attr("readonly", true)

You will get the cursor in the input, but your original requirement is met.

Example: http://jsfiddle.net/S77xa/1/