Home/ Questions/Q 8830689
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T08:09:09+00:00

The JQuery autocomplete code seems correct, but, does not work. The code seems simple

  • 0

The JQuery autocomplete code seems correct, but, does not work.

The code seems simple enough, and I did not see any javascript errors using “Developer tools” in IE8, or the “firebug” tool in FireFox…

But, nothing “drops down” from the listbox when a letter (e.g., “a”) is typed into the input field…

Please let me know if you can see anything amiss. I apparently am not “seeing the forest for the trees” at this point.

Here is the snippet from the definition of the JSF “Composite Component”…

    <!-- INTERFACE -->
<cc:interface>
    <cc:attribute name="idpref" required="true"/>
    <cc:attribute name="items" required="true"/>
</cc:interface>

<!-- IMPLEMENTATION -->
<cc:implementation>

    <!-- here is the input field -->
    <h:inputText type="text" id="#{cc.attrs.idpref}"/>

    <!-- here is the javascript -->
    <h:outputScript     library="js"        name="jquery-1.7.2.js" />
    <h:outputScript     library="js"        name="jquery-ui-1.8.21.custom.js" />
    <script type="text/javascript" >
        var jq = jQuery.noConflict();
        jq(document).ready(function()
        {
            jq(function()
            {
                var list = #{cc.attrs.items};
                var id = "#{cc.attrs.idpref}";
                var prependedid = jq('input[id$="' + id + '"]').attr("id");
                var comboid = "#" + prependedid;

                jq(comboid).autocomplete({
                    source: list
                });
            });

        });
    </script>
</cc:implementation>

Here is snippet of view tag contents from the page where the above composite component is used…

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:util="http://java.sun.com/jsf/composite/util"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <f:view contentType="text/html">
        <h:head>
            <title>testx</title>
            <meta charset="utf-8" />
        </h:head>
        <h:body prependid="false">
            <h:form id="form1" prependId="false">
                <util:autoComplete prependId="false"
                                   idpref="aaa"
                                   items="#{refDataController.data}" />
            </h:form>
        </h:body>
    </f:view>
</html>

Here is the backend java snippet…



    package aaa.bbb.ccc.war;

    import java.util.Arrays;
    import java.util.List;
    import org.springframework.context.annotation.Scope;
    import org.springframework.stereotype.Component;

    @Component("refDataController")
    @Scope("request")
        public class RefDataController
        {
            public RefDataController()
            {
            }
            private List data = Arrays.asList    ("\"Aman\"", "\"Albela\"", "\"Ali\"", "\"Ankit\"", "\"Azam\"", "\"Aryan\"");
            public List getData()
            {
                return data;
            }
        }

Thank you for any assistance!

sd

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Seems that there were a combination of two issues (i.e., as a jquery newby)…

    issue#1. A somewhat embarrassing oversight (ala, “is your PC plugged in?“)… I was setting autocomplete function’s “minLength” parameter value to 3, and not typing a minimum of 3 characters, so no list was being displayed when initially testing (I removed this parameter and am using the default minimum length of 1, for now)

    issue#2. The primary issue, however, was that I did not understand the problems that the jquery selector has with the JSF colon (“:”) character. I solved this with by using one of two workarounds (after googling the info, etc):

    (note: in these snippets, “#{cc.attrs.idpref}” is the JSF “composite component” attribute is am using to specify element id… FWIW, in this case the value happens to be “aaa“)

    workaround#1:

    //get the full id value of the element whose "id ends with" aaa...
var id = jq('input[id$="' + "#{cc.attrs.idpref}" + '"]').attr("id");
//"escape" the colon character so that jquery will not be confused...
id = id.replace(/:/g,"\\:");
//used escaped id value in the selector...
jq("input#" + id).autocomplete({
   source: list
});

    workaround#2:

    //start with the **unprepended** id value specified in the composite component  attribute...
var id = "#{cc.attrs.idpref}";
// use the "id ends with" aaa selector with the autocomplete function... 
jq('input[id$="' + "#{cc.attrs.idpref}" + '"]').autocomplete({
   source: list
});

    Thanks for all your collective reponses!

    sd

    • 0