jQuery“自动完成”不起作用答案

【问题标题】：jQuery "autocomplete" doesn't workjQuery“自动完成”不起作用
【发布时间】：2012-11-02 11:06:47
【问题描述】：

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

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

但是，当在输入字段中输入字母（例如，“a”）时，列表框中不会“下拉”...

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

这是来自 JSF“复合组件”定义的 sn-p...

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

这里是使用上述复合组件的页面的视图标签内容的sn-p...

<!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 sn-p...



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

感谢您的帮助！

【问题讨论】：

标签： jquery jquery-ui jsf-2 autocomplete

【解决方案1】：

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

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

【讨论】：

我会在 "jq(comboid).autocomplete" 之前和之后添加 2 个警报 ...--稍后再回复您。谢谢
我在“自动完成”之前和之后添加了警报，并且在进入或刷新页面时都会显示。
这确实是一种奇怪且不必要的方法，但它确实有效。此外，prependedid 和comboid 变量赋值方法也很奇怪且不必要。为什么不直接使用jq('input[id$="' + id + '"]').autocomplete(...)？
我删除了“jq(function()”，得到了相同的结果 - 两个警报都显示了。我想我会把它们排除在外。仍然没有得到任何“下拉”列表跨度>
并且找到了组合元素？ jq(comboid).length 返回什么？它应该是 1。

【解决方案2】：

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

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

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

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

感谢大家的集体回复！

【讨论】：