Кнопка отправки для автозаполнения jquery ajax action Rails Форма редактирования

Question

У меня есть форма редактирования, и я хочу, чтобы пользователи могли добавлять теги с помощью вызова 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 будет работать.Но как мне сказать, чтобы вызывать событие select: в .autocomplete на клавише ENTER или при нажатии кнопки Добавить тег?Я пробовал что-то вроде:

if (event.keyCode === 13) {
            event.preventDefault();
            $(this).autocomplete("instance").select();
            return false;
 }

Но я просто догадываюсь, потому что мое понимание JS очень плохое, и я всегда заканчиваю тем, что бьюсь головой о стену на такие вещи, которые кажутся простыми.Я понимаю, что мог бы просто создать еще одну AJAX-отправку в функции нажатия клавиши ENTER, но зачем повторять весь этот код.Кроме того, кнопка кажется, что это должно быть легко, но я не могу понять это.Чтобы было ясно, я не хочу отправлять всю форму страницы, пока не будет нажата кнопка ЭТО.