1

これは JSON 形式のデータ ソースです。

{
"list-1":
    [{"id":"1","value":"andy"},{"id":"2","value":"sandy"}],
"list-2":
    [{"id":"1","value":"candy"},{"id":"2","value":"brandy"}],
"list-3":
    [{"id":"1","value":"mandy"},{"id":"2","value":"dandy"}]
}

そして、次の出力を取得しようとしています:

<div id="result">
    <ul class="list-1">
        <li>andy</li>
        <li>sandy</li>
    </ul>
    <ul class="list-2">
        <li>candy</li>
        <li>brandy</li>
    </ul>
    <ul class="list-3">
        <li>mandy</li>
        <li>dandy</li>
    </ul>
</div>

機能するデフォルトのデータ ソース (JSON 形式) は次のとおりです: [{"id":"1"},{"foo":"bar"}]多次元データ配列を取得する方法に関するドキュメント/チュートリアル。

この出力を達成するためにJQuery AutoCompleteプラグイン内で何を変更/オーバーライドする必要がありますか(SelectまたはSuccessイベント内で?またはレンダリング部分とその方法を変更する必要があります)

前もって感謝します

4

2 に答える 2

1

どのオートコンプリーターのことを言っているのかよくわかりませんが、これはhttp://jqueryui.com/autocompleteですよね?

ほとんどの自動補完ソリューションは、実際にはまったく柔軟ではないことがわかりました。そして、そこにはほんの少ししかないようです（少し前にはたくさんあったと思いますが）。しかし、 xingで使用されている autoCompletion プラグインが 1 つあります。これは、github ページで入手できます。これは、特別なマークアップに適合する可能性があるほど柔軟でなければなりません。柔軟に対応できるように設計されています。github/xing/jquery.autocompletr で確認してください。

readmeには、そのツールのsource,inputProcessorおよびoutputProcessorsパラメータのみが記載されていますが、使用できるitemRenderer,containerRendererおよびbeforeShowフックもあります。あなたの特別なマークアップを完成させるために、そしておそらくあなたが必要とするでしょうitemRenderer。containerRenderer

うまくいけば、これは役に立ちました。しかし、JSON 応答はオートコンプリートで使用するには非常に奇妙です。そのため、JSON 応答を変更してデータを含む 1 つの配列のみにするか、ユースケース用に独自の配列を作成する必要がある場合もあります。

乾杯

于 2013-06-25T07:14:39.543 に答える
0

あなたが達成しようとしているもののために、jquery tmplt をテンプレートツールhttps://github.com/BorisMoore/jquery-tmplとして使用できます。データは JSON オブジェクトであるため、テンプレートを作成できます。

html:

<div id="result">

</div>


//On document ready:
$(document).ready(function(){
//set your json object (this could be from a ajax call or whatever)    
var objectData = 
    {
    "list-1":
        [{"id":"1","value":"andy"},{"id":"2","value":"sandy"}],
    "list-2":
        [{"id":"1","value":"candy"},{"id":"2","value":"brandy"}],
    "list-3":
        [{"id":"1","value":"mandy"},{"id":"2","value":"dandy"}]
    }

    //init variables
    var key, count = 0;
    //loop through the object:
    for(key in objectData) {
       //create a UL element for each main item:
       $('#result').append('<ul class="' + key + '"></ul>');

        //loop through each child object:
        if(objectData.hasOwnProperty(key)) {
            for (var i = 0; i < objectData[key].length ; i++)
             //add the template:  
             $.tmpl( '<li>${value}</li>', { "value" : objectData[key][i].value }).appendTo("." + key);  
        }
}

});

これには、必ず tmpl.js CDN を含めてください: http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js

ここでフィドル: http://jsfiddle.net/eRQ4V/

于 2013-06-25T07:21:39.960 に答える