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

2つの問題の組み合わせがあったようです（つまり、jquery newbyとして）...

問題＃1。やや恥ずかしい見落とし（ああ、「あなたのPCは接続されていますか？」）...オートコンプリート機能の「minLength」パラメーター値を3に設定していて、最小3文字を入力していなかったため、最初のテストではリストが表示されませんでした(私はこのパラメータを削除し、今のところデフォルトの最小長 1 を使用しています)

問題＃2。しかし、主な問題は、jquery セレクターが JSF コロン (":") 文字に関して抱えている問題を理解していなかったことです。2つの回避策のいずれかを使用してこれを解決しました（情報をグーグルで調べた後など）：

(注: これらのスニペットでは、「#{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

于 2012-11-14T16:27:36.967 に答える
0

そのコードはまったく呼び出されていますか？このコードは少し冗長に思えます。内部に渡された関数がjq呼び出されるかどうかは疑問です。そうでない場合、オートコンプリートは初期化されません。ブレークポイントを追加するか、呼び出しの前後にアラートを配置することで確認できjq(comboid).autocompleteます。2 つのアラートが発生した場合は、その行も実行されます (間違った要素である可能性があります)。

jq(document).ready(function()
{
   jq(function()
   ....
于 2012-11-13T23:25:02.773 に答える