1

文字「C」のみを見つけるように見えるjqueryのオートコンプリートに取り組んでいます。そして、なぜこれが起こるのでしょうか？json フィードを使用した他のオートコンプリートは正常に動作しますが、これは情報の最初の列 (形状) から選択できる並べ替えのグリッドを表示する必要があります。「C」と入力するとドロップダウンが表示されますが、それを超える組み合わせは機能しません。また、「L」または「A」と入力すると、選択の1つがポップアップするはずですが、そのような運はありません

JSON

[
    {
        "shape":"CLRE1 LAS",
        "eye":"50",
        "bridge":"18",
        "color":"all"
    },
    {
        "shape":"CLRE2 LAS",
        "eye":"48",
        "bridge":"18",
        "color":"all"
    },
    {
        "shape":"CLRK UOC",
        "eye":"54",
        "bridge":"18",
        "color":"all"
    },
    {
        "shape":"ABCD KCT",
        "eye":"105",
        "bridge":"25",
        "color":"all"
    }
]

Jクエリコード

$.getJSON("resources/data/frameshape.json", function(projects) 
        {

        $( "#frameShaping" ).autocomplete({
            source: projects,
            select: function( event, ui ) {
                $( "#frameShaping" ).val( ui.item.shape );
                return false;
            }
        })

        .data( "autocomplete" )._renderItem = function( ul, item ) {

            if (ul.children().length == 0){
                    ul.append( '<li class="t2"><p class="testing">Shape</p>
                    <p class="testing">Eye</p><p class="testing">Bridge</p>
                    <p class="testing">Color<p></li>' );
            }//end if

            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a><p class='linkage'>" 
                    + item.shape + "</p><p class='linkage'>" 
                    + item.eye + " </p><p class='linkage'>" 
                    + item.bridge + "</p><p class='linkage'> " + 
                    item.color +"</p></a>" )
                .appendTo( ul );

        };
    });

HTML

<input id="frameShaping" size="25"/>
4

1 に答える 1

1

オートコンプリートでは、labelプロパティ、valueプロパティ、またはその両方を含むオブジェクトを含む配列が必要です。これが正しく機能するために必要なのは、これらのプロパティの1つを配列内のオブジェクトに追加することだけです。

$.getJSON("resources/data/frameshape.json", function(projects) {
    $.each(projects, function (i, project) {
        project.label = project.shape;
    });

    $("#frameShaping").autocomplete({
        source: projects,
        /* other options */
    });
});

例： http： //jsfiddle.net/gUEjn/（明らかに、AJAX呼び出しなし）。

もう1つのオプションは、sourceオプションを介して独自のフィルタリングロジックを提供することです（これは、ソースオブジェクトにプロパティを追加したくない場合に特に便利です）。基本的に、リクエストオブジェクトとレスポンスコールバックを受け入れる関数を提供し、関数内で必要なフィルタリングを行うことができます。

$("#frameShaping").autocomplete({
    source: function (request, response) {
        /* this is also how jQueryUI builds a regex to find candidates internally */
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");

        response($.grep(projects, function (value) {
            return matcher.test(value.shape);
        }));
    },
    /* etc. */
})

例： http： //jsfiddle.net/P2WF9/

ウィジェットを初期化する前にソース配列を余分に繰り返す必要がないため、2番目のオプションをお勧めします。

常に「C」の入力で機能していた理由については、実際には文字列内の任意の文字に対して機能していました：「[object Object]」

これは、内部的にはjQueryUIが次のとおりであるためです。

  1. 入力した入力から正規表現を作成する（たとえば「C」）
  2. testRegExオブジェクト（文字列を受け入れる）のメソッドを使用する

これで、メソッドに何かを渡すと、のECMAScript仕様に従ってtest、引数がを使用して文字列に変換されます。toStringRegExp.test

したがって、この特定のケースでは、オブジェクトの1つをtoString取得してそれを呼び出すと、[object Object]どの「C」が一致するかがわかります。これは配列内のすべてのオブジェクトに当てはまるため、これらの文字のいずれかを検索すると、実際にはすべてのアイテムが返されます。

これが起こっていたことの要約例です：http： //jsfiddle.net/ZnA2w/

于 2012-05-24T02:33:24.523 に答える