1

私は次の形式のjson配列を持っています：

[{"label":<some-label>,"spellings":[<list of spellings>]}, ...]

jqueryuiautocompleteを使用して上記の配列を解析する必要があります。ただし、いくつかの制約があります。

  1. オートコンプリートの提案には、「スペル」からの一致が含まれている必要がありますが、対応する「ラベル」のみが提案されている必要があります。たとえば、「ラベル」にn個の「スペル」がある場合、オートコンプリートはn個の「スペル」にその特定の「ラベル」のみを表示する必要があります。
  2. 提供された提案から選択すると、対応する「ラベル」はテキスト入力ボックスにのみ反映されます。

どのように進めればよいですか？ポインタはありますか？

そして、対応する「ラベル」の「スペル」のリストを繰り返す方法は？

これは私がやろうとしていることですが、文字化けした出力を提供します。

var labels = []
var values = [] 
$.getJSON($url, function(data) { 
  $.each(data, function(key, val) { 
    for (var v in val.value)
      values.push(val.value[v])
    labels.push(val.label)
}); 
$("#text1").autocomplete({ 
  minLength: 2, 
  source: values, 
  focus: function(event, ui) { 
    $("#text1").val(ui.item.label); 
    return false; 
  }, 
  select: function(event, ui) { 
    $("#text1").val(ui.item.label); 
    return false; 
  } 
});
});
4

1 に答える 1

5

スペルごとに1つずつ、アイテムの単一のソース配列を作成します。ここで、labelプロパティは各スペルのラベルであり、valueプロパティはスペル自体です。spellingこれにより、各オブジェクトの配列を反復処理したり、時間がかかる可能性のある一致をチェックしたりすることなく、結果をすばやくフィルターで絞り込むことができます。

次に、定義した関数内でsource独自のフィルタリングロジックを実行し、候補リストの各「ラベル」のインスタンスを1つだけ許可します。

このようなものが機能するはずです（オートコンプリートは$.getJSONコールバック内で初期化されることに注意してください。これは、ウィジェットが初期化される前にソースデータがロードされていることを確認するために必要です）：

$.getJSON($url, function(data) {
    $.each(data, function (i, el) {
        source.push({ label: el.label, value: el.label });

        $.each(el.spellings, function (j, spelling) {
            source.push({ label: el.label, value: spelling });
        });
    });

    /* initialize the autocomplete widget: */
    $("input").autocomplete({
        source: function (request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i")
                , results = [];

            /* Make sure each entry is only in the suggestions list once: */
            $.each(source, function (i, value) {
                if (matcher.test(value.value) && $.inArray(value.label, results) < 0) {
                    results.push(value.label);
                }
            });
            response(results);
        }
    });
});

例： http： //jsfiddle.net/MaMZt/

于 2012-08-08T16:26:21.127 に答える