提交jquery自动完成ajax操作的按钮Rails编辑表单

时间:2018-05-17 16:00:10

标签: javascript jquery ruby-on-rails ajax jquery-ui-autocomplete

我有一个编辑表单,我希望允许用户使用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提交,但为什么要重复所有代码。按钮似乎应该很容易,但我无法弄明白。为了清楚起见,我不想在点击提交按钮之前提交整个页面表单。

0 个答案:

没有答案