JQuery UI autocomplete combobox disabled input

Question

I am currently using jQuery-UI to automatically complete the combobox plugin, but I changed the script so that the input element added by the plugin is disabled (the user cannot write to the input, he can only click on the button to view the parameters), for example:

$.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 does not hide after I lost focus by clicking on an empty space or clicking on another combo box (the input element has a blur event handler, but it does not work).

Is there a way to set the blur event to an input element that is disabled or some way to hide the combo box when the user wants to lose focus?

Answer 1

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

 .attr("disabled", true) 

with:

 .attr("readonly", true) 

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

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

Answer 2

You need to change:

 .attr("disabled", true); 

in

 .attr("disabled", "disabled"); 

Take a look at this script: http://jsfiddle.net/Lq8tq/1/

Hope this helps!

Answer 3

Try it.

 $('comboboxname').combobox('disable'); $('comboboxname').combobox('enable');