3

jQuery UI のオートコンプリート機能を使用しているときに、カスタム プロパティで問題が発生しました。ui.item.make何らかの奇妙な理由で、オートコンプリート機能では、またはに make または id 属性を使用できませんが、 にui.item.id設定すると機能しui.item.labelます。

これは、私が遭遇している問題の例を含むJSFiddleです。オートコンプリートが機能している別の例を次に示しますが、違いは label プロパティのみです。

カスタム プロパティの使用がうまくいかない理由について、情報をいただければ幸いです。

4

3 に答える 3

2

make のリストを単純に前処理することもできます (forEach を参照)。ajax 経由でデータを取得する場合は、同様のこともできます。注：return false値を使用せず、代わりにmakeを使用するように、選択にも追加しました。

var carMake = [{
    "make": "Smart",
        "id": '200038885'
}, {
    "make": "Bomb",
        "id": '200038885'
}, {

    "make": "Volkswagen",
        "id": '200000238'
}];

function addlabel(row) {
    row.label = row.make;
    row.value = row.id;
}
carMake.forEach(addlabel);
$("#vehicle_make").autocomplete({
    source: carMake,
    delay: 0,
    minLength: 1,
    autoFocus: false,
    select: function (event, ui) {
        $(this).val(ui.item.make);
        return false;
    }
});

編集: Ajax データ注: ajax データを使用して処理するには、これはメソッドになります:

success: function (data) {
    response($.map(data, function (item) {
        return {
                 label: item.make
                 value: item.id,
                 make: item.make,
                 id: item.id
               }
    }))
},
于 2013-04-09T18:37:23.823 に答える
2

デフォルトで認識されるプロパティには、ラベルと値のみが含まれていると思います。カスタム プロパティを使用する場合は、カスタム データ プロパティを実装する必要があります。

次のようになります。

$("#vehicle_make").autocomplete({
    source: carMake,
    delay: 0,
    minLength: 1,
    autoFocus: false,
    select: function(event, ui) {
      $('#vehicle_make').val(ui.item.make);
    }
  })
  .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.make+ "<br>" + item.id + "</a>" )
        .appendTo( ul );
    };

またはjsfiddle経由

これにより、カスタム プロパティを使用して ui.item オブジェクトにアクセスできるようになります。
(ID を表示したくない場合は、リスト項目の非表示フィールドで非表示にすることができます)

http://jqueryui.com/autocomplete/#custom-dataを参照してください。

于 2013-04-09T17:36:02.493 に答える
0

APIドキュメントによると：

配列: 配列はローカル データに使用できます。サポートされている形式は 2 つあります: ...

labelプロパティとvalueプロパティを持つオブジェクトの配列: [ { label: "Choice1", value: "value1" }, ... ]

したがって、このように具体的に名前を付ける必要があります。

于 2013-04-09T17:34:36.463 に答える