readonly not working in the multiple autoComplete primefaces

Question

The readonly attribute of <p:autoComplete> does not work. I still can type text in after setting readonly="true". I don't want to use disabled="true", because it won't let me remove any of the selections. How is this caused and how can I solve it?

Answer 1

Seems like a know issue (at least in 3.4.2)

Issue 5070: auto complete readonly but send ajax to server

Possible workaround :

Render outputText or read-only inputText component instead.

PrimeFaces Community Forum : autocomplete readonly: still send ajax

Answer 2

I had the same problem. However, I found a work around. You can make the individual contents of the auto complete set to readonly.

<script type="text/javascript">
    //<![CDATA[

    $(document).ready(function() {
        document.getElementById('contentForm:myId_input').setAttribute("readOnly","true");
    });

    // ]]>
</script>

Here myId is the id of the autocomplete. The input box has an id myId_input, which is simply '_input' appended at the end.

As far as the existing values go, you can use the select and the unselect events to restrict changes.

Answer 3

It's my workaround. It looks as like as the autocomplete component

<h:panelGroup layout="block" styleClass="ui-autocomplete ui-autocomplete-multiple">
    <h:panelGroup layout="block" styleClass="ui-autocomplete-multiple-container ui-widget ui-inputfield ui-corner-all">
        <ui:repeat value="#{bean.values}" var="value">
            <h:panelGroup layout="block" styleClass="ui-autocomplete-token ui-state-active ui-corner-all">
                <h:outputText styleClass="ui-autocomplete-token-label" value="#{value}"/>
            </h:panelGroup>
        </ui:repeat>
    </h:panelGroup>
</h:panelGroup>