0

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

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

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

如果您发现有什么不对劲，请告诉我。在这一点上，我显然不是“只见树木不见森林”。

这是JSF“复合组件”定义中的片段...... 

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

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

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

这是后端Java片段...



    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;
            }
        }

感谢您的任何帮助！

sd

4

2 回答 2

0

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

jq(document).ready(function()
{
   jq(function()
   ....
于 2012-11-13T23:25:02.773 回答
0

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

问题#1。有点令人尴尬的疏忽（ala，“你的电脑插上了吗？ ”）...我将自动完成功能的“minLength”参数值设置为 3，并且没有输入至少 3 个字符，所以最初测试时没有显示列表（我删除了这个参数，现在使用默认的最小长度 1）

问题#2。然而，主要问题是我不理解 jquery 选择器与 JSF 冒号 (":") 字符的问题。我通过使用两种解决方法之一解决了这个问题（在谷歌搜索信息等之后）：

（注意：在这些片段中，“ #{cc.attrs.idpref} ”是用于指定元素 ID 的 JSF“复合组件”属性... 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

于 2012-11-14T16:27:36.967 回答