Javascript 自动完成和Axios

我试图用axios创建一个自动完成表单，但找不到在rails和我的表单之间共享数据的方法

这是我的表格：

 <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" onkeyup="valueChange(this);">
        <label for="autocomplete-input">Autocomplete</label>
      </div>
    </div>
  </div>
</div>

问题是自动完成，但元素的格式如下：

data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },

我用“json”的方式格式化了它 我不想循环和浪费cpu时间去改变，他们的方法是在服务器端正确地1/推送还是在客户端正确地2/获取

谢谢

格雷格

答案是：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.autocomplete');
        var instances = M.Autocomplete.init(elems, {});
    });

    function valueChange(elem) {
        var instance = M.Autocomplete.getInstance(elem);

        console.log("search for " + elem.value);
        axios.post("<%= test_autocomplete_search_path %>", {
            search: elem.value,
            authenticity_token: '<%= form_authenticity_token %>',
        })
        .then(function (response) {
            var map = new Object();
            for (bcl = 0; bcl < response.data.length; bcl ++) {
                map[response.data[bcl].town] = null;
            }
            if (response.data.length > 0) {
                console.log(map);
                instance.updateData(map);
            }
        })
        .catch(function (error) {
            alert(error);
        });
    };
</script>

document.addEventListener（'DOMContentLoaded'，function（）{
var elems=document.querySelectorAll（'.autocomplete'）；
var instances=M.Autocomplete.init（elems，{}）；
});
功能值更改（elem）{
var instance=M.Autocomplete.getInstance（elem）；
控制台日志（“搜索”+元素值）；
轴心柱（“”{
搜索：elem.value，
真实性\u令牌：“”，
})
.然后（功能（响应）{
var map=新对象（）；
对于（bcl=0；bcl0）{
控制台日志（map）；
实例.updateData（map）；
}
})
.catch（函数（错误）{
警报（错误）；
});
};

我需要将Ror json列表转换为javascript：

data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.autocomplete');
        var instances = M.Autocomplete.init(elems, {});
    });

    function valueChange(elem) {
        var instance = M.Autocomplete.getInstance(elem);

        console.log("search for " + elem.value);
        axios.post("<%= test_autocomplete_search_path %>", {
            search: elem.value,
            authenticity_token: '<%= form_authenticity_token %>',
        })
        .then(function (response) {
            var map = new Object();
            for (bcl = 0; bcl < response.data.length; bcl ++) {
                map[response.data[bcl].town] = null;
            }
            if (response.data.length > 0) {
                console.log(map);
                instance.updateData(map);
            }
        })
        .catch(function (error) {
            alert(error);
        });
    };
</script>