简体   繁体   中英

Jquery UI autocomplete combobox disabled input

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?

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/

Try this.

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

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

You need to change:

.attr("disabled", true);

to:

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

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

I hope this helps!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM