My Select2 3.4.5はJSONデータを処理しません。
これがHTMLの入力ボックスです。
<input class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />
…そして私のJavaScript
$(".itemSearch").select2({
placeholder: "Search for an Item",
minimumInputLength: 2,
ajax: {
url: "/api/productSearch",
dataType: 'json',
quietMillis: 100,
data: function (term, page) {
return {
option: term
};
},
results: function (data, page) {
var more = (page * 10) < data.total;
return {
results: data.itemName,
more: more
};
}
},
formatResult: function (data, term) {
return data;
},
formatSelection: function (data) {
return data;
},
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) {
return m;
}
});
テキストボックスに何かを入力するたびに値を返すLaravel 4でAPIを作成しました。
テキストボックスに「test」と入力した場合の結果は次のとおりです。
[{"itemName":"Test item no. 1","id":5},
{"itemName":"Test item no. 2","id":6},
{"itemName":"Test item no. 3","id":7},
{"itemName":"Test item no. 4","id":8},
{"itemName":"Test item no. 5","id":9},
{"itemName":"Test item no. 6","id":10},
{"itemName":"Test item no. 7","id":11}]
Select2ドロップダウンに結果を追加できません。 formatSelection
とformatResult
が問題を引き起こしているのは、どのパラメーターを配置する必要があるのかわからないからです。コンテナー、オブジェクト、クエリなどのパラメーターを取得する場所と、返される値がわからない、またはJSON応答が間違っていますか?
ここに例があります
$("#profiles-thread").select2({
minimumInputLength: 2,
tags: [],
ajax: {
url: URL,
dataType: 'json',
type: "GET",
quietMillis: 50,
data: function (term) {
return {
term: term
};
},
results: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.completeName,
slug: item.slug,
id: item.id
}
})
};
}
}
});
とても簡単です
select2 v4.0.わずかに異なる
$(".itemSearch").select2({
tags: true,
multiple: true,
tokenSeparators: [',', ' '],
minimumInputLength: 2,
minimumResultsForSearch: 10,
ajax: {
url: URL,
dataType: "json",
type: "GET",
data: function (params) {
var queryParameters = {
term: params.term
}
return queryParameters;
},
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.tag_value,
id: item.tag_id
}
})
};
}
}
});
バージョン4.0.2では、processResults
とresult
でわずかに異なります。
processResults: function (data) {
return {
results: $.map(data.items, function (item) {
return {
text: item.tag_value,
id: item.tag_id
}
})
};
}
result
にdata.items
を追加する必要があります。 items
はJson名です:
{
"items": [
{"id": 1,"name": "Tetris","full_name": "s9xie/hed"},
{"id": 2,"name": "Tetrisf","full_name": "s9xie/hed"}
]
}
これが問題を修正した方法です。データ変数にデータを取得しています。上記のソリューションを使用すると、エラーcould not load results
が発生しました。 processResultsで結果を異なる方法で解析する必要がありました。
searchBar.select2({
ajax: {
url: "/search/live/results/",
dataType: 'json',
headers : {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
delay: 250,
type: 'GET',
data: function (params) {
return {
q: params.term, // search term
};
},
processResults: function (data) {
var arr = []
$.each(data, function (index, value) {
arr.Push({
id: index,
text: value
})
})
return {
results: arr
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1
});
全部を包み込むまでアヤックスは解雇されない
setTimeout(function(){ .... }, 3000);
Vueのマウントセクションで使用していました。もっと時間が必要です。
問題は、不適切なマッピングが原因である可能性があります。 「データ」に結果セットがありますか?私の例では、バックエンドコードは「items」キーの下に結果を返すため、マッピングは次のようになります。
results: $.map(data.items, function (item) {
....
}
ではなく:
results: $.map(data, function (item) {
....
}
Ajaxリクエストが発行されない場合は、select要素のselect2クラスを確認してください。 select2クラスを削除すると、この問題が修正されます。