1

マップで使用した場合にui.autocompleteの結果を制限する正しい方法は何ですか？

ここで、単純な配列で機能するソリューションで同様の問題を見つけました。jQueryUIオートコンプリートで結果を制限します が、ソースが外部であるという事実を除けば、私の配列は少しネストされています。

未定義のエラーに対する別の解決策もここでテストしました：jqueryオートコンプリート制限の結果

以下は私がリンクから適応したものですが、成功しませんでした。

私のテスト：

var sourceUrl = '/path/to/products.json';
$("#auto").autocomplete({
        source: function (request, response) {        
          $.getJSON(sourceUrl, {term: request.term}, function (result) {
                response($.map(result.products, function (item) {
                   var myarray = item.product;
                   console.log(myarray); // the returns look expected (Product One, Product Two, etc)
                   var results = $.ui.autocomplete.filter(myarray, request.term);
                   results.slice(0, 10);
                }));                
          });
        }
});

products.json：

{"products": [{"label": "Product One", "product": "Product One", "sku": "12345"},    ...

すべての製品を単純に出力する方が簡単ですが、ドロップダウンで保持するには非常に多くの/重いものです。そのため、結果を制限する必要があります。

ヒントは大歓迎です。ありがとう。

4

1 に答える 1

4

ドキュメントから、$。map（）

関数は以下を返すことができます：

  • 結果の配列にマップされる変換された値
  • nullまたは未定義、アイテムを削除します
  • 値の配列。これは完全な配列にフラット化されます。

マップを使い続けたい場合は、条件を追加して結果を制限できます。

$.map(result.products, function (item, i) {
    if(i>9){
        return null
    }
}

ここで明確にしておくべき重要なことは、配列全体を処理しているときと、1つの要素だけに触れているときです。var myarray = item.product;心配です。それぞれの結果が配列であるのはなぜですか？sourceUrlからJSON応答を投稿できますか？

理想的には、sourceUrlは配列を返し、$.map各要素を目的の形式に変換するために使用されます。通常、これらの要素は配列ではなくオブジェクトになります。したがって、マップに提供するコールバックの内部では、配列やフィルタリングについての話はありません。それはループの外で行う必要があります。

コメントの編集：

ソースが静的ファイルの場合、オートコンプリートフィールドに何かを入力するたびにユーザーに再ダウンロードさせるのではなく、一度だけ取り込むことをお勧めします。次のようなものがおそらくより良い考えです。

var sourceData;
$.getJSON('/path/to/products.json', function (result) {
    sourceData = $.map(result.products,function(product){
        return product.product;
    });
});

$("#auto").autocomplete({
        source: sourceData
});

もちろん、この時点で、ファイルが別のファイルである特別な理由があるのか​​、それともJSインクルードではないのかを自問する必要があります。

于 2012-05-27T03:21:28.710 に答える