ASP.NetMVCアプリケーションでマテリアライズUIを使用しており、動的データでオートコンプリートコントロールを使用しています。
これが私のコードです、
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">textsms</i>
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input">Autocomplete</label>
</div>
</div>
</div>
</div>
これはjqueryajax呼び出しです。
$(function () {
$.ajax({
type: 'GET', // your request type
url: "/Home/GetData/",
success: function (response) {
var myArray = $.parseJSON(response);
debugger;
$('input.autocomplete').autocomplete({
data: {
"Arizona (1)": null,
"Florida (2)": null,
"Georgia (3)": null,
"Hawaii(4)": null,
"Idaho (5)": null,
"Illinois (6)": null
}
});
}
});
});
この形式でのみデータを受け入れることができ、これが私の応答です、
"[["Arizona (1)"],["Florida (2)"],["Georgia (3)"],["Hawaii (4)"],["Idaho (5)"],["Illinois (6)"]]"
オートコンプリートが理解できる形式に応答を変換するにはどうすればよいですか?
あまり派手ではありませんが、試してみてください。
$(function () {
$.ajax({
type: 'GET', // your request type
url: "/Home/GetData/",
success: function (response) {
var myArray = $.parseJSON(response);
var dataAC = {};
for(var i=0;i<myArray[0].length;i++){
eval("dataAC." + myArray[0][i] + " = null;");
}
debugger;
$('input.autocomplete').autocomplete({
data: dataAC
});
}
});
});
この方法で応答を変換してみてください。この場合、コードの最初の行は必要ありません。
var responseData = JSON.parse(`[["Arizona (1)"],["Florida (2)"],["Georgia (3)"],["Hawaii (4)"],["Idaho (5)"],["Illinois (6)"]]`);
var acArray = [];
var acData = {};
responseData.forEach(res => {
acArray.Push(res.join())
})
acArray.forEach(acObj => {
acData[acObj] = null;
})
console.log(acData)