web-dev-qa-db-ja.com

jqueryajaxの動的データでオートコンプリートをマテリアライズ

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)"]]"

オートコンプリートが理解できる形式に応答を変換するにはどうすればよいですか?

3
AMeh

あまり派手ではありませんが、試してみてください。

$(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
            });
        }
    });
});
0
JC Hernández

この方法で応答を変換してみてください。この場合、コードの最初の行は必要ありません。

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)
0
Abhishek Singh