Question

I have an input box. When the input box is clicked, all items from the autocomplete source are displayed. When the user selects one item the input box is properly populated. Everything works fine… Nevertheless I am trying to have something more and I do not manage to see how to do it. I would like this first input box not to be editable by the user. Currently it is possible for him to enter manually a value. If I put readonly in my css, the input is not anymore clickable…. So I do not see how to do it. Oh by the way, in do not want to use a combo box. The input has to stay an input. Thank you very much in advance for the replies. Cheers. Marc.

http://jsfiddle.net/DeJQB/2/

My html:

<input type="text" id="my-input" />

My js:

$(function() {
    var availableTags = [
            "00","15","30","45"
        ];
    $("#my-input").autocomplete({
        source: availableTags,
        minLength: 0
    }).click(function() {
        $(this).val("");
        $(this).autocomplete("search");
    });
});​

​

Answer 1

Have you tried adding a HTML readonly attribute, as opposed to CSS? The following works fine for me:

<input type="text" id="my-input" readonly="readonly" />