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>
这是我的javascript:
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems, null);
});
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) {
instance.updateData(response.data.nom_commune);
console.log(response.data.nom_commune);
})
.catch(function (error) {
alert(error);
});
};
</script>
这是我的红宝石:
def autocomplete_search
towns = Town.select(:nom_commune).where("nom_commune ILIKE ?", "%#{params[:search]}%")
render :json => towns.map { |town| {
name: town.nom_commune,
placeholder: nil
}
}
问题是自动完成,除了以这种方式形成的元素:
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>
推荐阅读
- xml - XPath - 查找相似但包含非字母数字字符
- javascript - 反应原生:当我试图导航到某个页面时出现什么错误?
- python - TypeError: conv2d(): argument 'input' (position 1) must be Tensor, not int
- html - 如何强制 svg 动画在蒙版中重新触发
- javascript - 如何在javascript中使用不带switch case的模式匹配(以函数式编程方式)
- android - 如何在颤振中创建自定义范围选择器?
- python - 将 Python 搁置从 dbm.gnu 转换为 dbm.dumb
- sql - Teradata - 如何理解数据分布?
- javascript - dayjs 没有正确转换时区
- c# - API:根据枚举值返回视图模型/响应