Question

JQuery自动完成代码似乎是正确的，但是不起作用。

代码看起来很简单，我没有在IE8中使用“开发人员工具”或FireFox中的“firebug”工具看到任何javascript错误......

但是，当输入字段中输入一个字母（例如“a”）时，没有任何内容从列表框中“下拉”......

如果您发现任何问题，请告诉我。在这一点上，我显然不是“看树林”。

以下是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>

<cc:interface> <cc:attribute name="idpref" required="true"/> <cc:attribute name="items" required="true"/> </cc:interface>  <cc:implementation>  <h:inputText type="text" id="#{cc.attrs.idpref}"/>  <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>

以下是使用上述复合组件的页面中的视图标记内容片段...

这是后端java片段...

<!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>

感谢您的帮助！

SD

Answer 1

该代码是否完全被调用？这段代码似乎有点多余。我怀疑是否曾调用传递给内部jq的函数。如果确实不是，则永远不会初始化自动完成。您可以通过添加断点来验证，或者只是在调用jq(comboid).autocomplete之前和之后发出警报。如果您收到两个警报，那么该行也将被执行（可能是错误的元素）。

jq(document).ready(function()
{
   jq(function()
   ....

Answer 2

似乎有两个问题的组合（即作为jquery newby）......

<强>问题＃1 即可。有点尴尬的疏忽（ala，“是你的PC插上了吗？”）...我将自动完成功能的“minLength”参数值设置为3，而不是输入最少3个字符，所以没有最初测试时显示了列表（我删除了此参数，暂时使用的默认最小长度为1）

<强>问题＃2 即可。然而，主要问题是我不理解jquery选择器与JSF冒号（“：”）字符的问题。我通过使用两种解决方法之一解决了这个问题（在搜索信息后等）：

（注意：在这些摘录中，“ ＃{cc.attrs.idpref} ”是JSF“ 复合组件 “属性用于指定元素ID ... FWIW，在这种情况下，值恰好是” aaa “）

解决方法＃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 });

解决方法＃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 });

感谢您的所有集体回应！

SD

jQuery“自动完成”不起作用

2 个答案: