我有一个编辑表单,我希望允许用户使用AJAX调用添加标签。当自动填充中的项目与人们想要的内容匹配时,我有自动完成功能。当自动完成下拉列表建议突出显示并且它们命中TAB时,它将执行AJAX操作,因为我已设置autofocus:true
。如果他们点击自动填充列表中的某个项目,它也会按照它应该提交。但我希望能够创建不在下拉列表中的新标签。如果用户键入一个尚未作为标记存在的单词,则无法将其提交。我在文本字段旁边添加了一个Add Tag
按钮,但不知道如何让它调用AJAX操作。
HTML:
<div class="field h4">
Add Tags:<%= text_field_tag 'add_tag' %>
<button id="tag-submit" class="btn btn-sm btn-brand">Add Tag</button>
</div>
脚本:
<script>
$(function () {
var availableTags = <%= raw( Tag.all.pluck(:name) ) %>;
$("#add_tag")
// don't navigate away from the field on tab when selecting an item
.on("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).autocomplete("instance").menu.active) {
event.preventDefault();
}
if (event.keyCode === 13) {
event.preventDefault();
return false;
}
})
.autocomplete({
minLength: 0,
autoFocus: true,
source: availableTags,
select: function( event, ui ) {
$.ajax({
type: "POST",
url: "/add_tag",
data: {
ppe: {
id: <%= @ppe.id %>,
new_tag: ui.item.value
}
},
success: function (data) {
return false;
},
error: function (data) {
return false;
}
});
}
});
});
</script>
正如您可以在脚本顶部看到的那样,如果菜单处于活动状态,因为有自动填充建议,TAB键将起作用。但是如何告诉它在ENTER键上的select:
中调用.autocomplete
事件或者单击添加标签按钮?我尝试过这样的事情:
if (event.keyCode === 13) {
event.preventDefault();
$(this).autocomplete("instance").select();
return false;
}
但我只是在猜测,因为我对JS的掌握非常差,而且我总是在这样看似简单的事情上撞墙。我知道我可能只是在ENTER按键功能中构建一个完整的其他AJAX提交,但为什么要重复所有代码。按钮似乎应该很容易,但我无法弄明白。为了清楚起见,我不想在点击提交按钮之前提交整个页面表单。