Попытка программно вызвать Enter в Mendix с помощью виджета сниппета JavaScript

Question

У меня есть DataGrid с функцией поиска, и я хочу, чтобы веб-сайт автоматически обновлял сетку при каждом нажатии клавиши в строке поиска, как это делают современные поисковые системы.Представьте, что вы нажимаете ввод после каждого нажатия клавиши или нажимаете кнопку поиска.Единственный способ сделать это в Mendix - использовать внешние виджеты (их нельзя использовать, потому что большинство из них Arent может искать связанные объекты в базе данных) или использовать фрагменты JavaScript, которые я сделал.

Я уже пытался программно нажать клавишу ввода, но не могу получить код для этого.

Другой вариант, который я пробовал, состоял в том, чтобы программно нажимать на строку поиска после каждого нажатия клавиши, что само по себе работает, но проблема здесь заключалась в том, что выделение выпрыгивает из поля ввода на кнопку поиска и также отсутствует вводв поле поиска.

Вариант 1: программным нажатием кнопки поиска

определение элементов на странице

var dataGrid = document.querySelector('.mx-datagrid.mx-name-grid1');
var itemsSelect = dataGrid.querySelector('.mx-grid-search-input.mx-name-searchField1')
var searchButton = dataGrid.querySelector('.mx-grid-search-controls > button.mx-grid-search-button')

определение функции

function clickSearchButton() {
searchButton.click();
};

запуск функциис каждым изменением на входе

itemsSelect.onkeypress = function(){clickSearchButton};

Вариант 2: программно нажмите Enter

Это в значительной степени тот же код, что и выше, и способ, которым я бы предпочел его.

Iперепробовал много вариантов, но единственное, что я хочу, в конце концов, должно выглядеть так:

itemsSelect.onkeypress = function(){*call a function to programmatically press enter*};

Я пробовал решения со всего, например:

Возможно лиимитировать события нажатия клавиш программно?

Я хочу нажимать клавишу ввода программно, когда пользователь делает некоторые вещи в js

и многих других источниках, некоторые утверждают, чтоэто невозможно из соображений безопасности.Это правда?

Я пытаюсь решить это около двух недель, но безуспешно.Я что-то упустил, есть ли другое решение, о котором я не думал?Не использовать Mendix не вариант.Это для огромного проекта на работе.

Answer 1

Сначала выясните класс и идентификатор текстового поля и интересующей вас кнопки. Обычно они начинаются с префикса mx-name-. В этом примере они называются mx-name-confirmPasswordInput и mx-name-confirmChangePassword.

Затем используйте пользовательский виджет HTML Snippet, чтобы вставить этот фрагмент Javascript на свою страницу:

(function() {
    document.addEventListener("keydown", function(e) {
        if (e.keyCode !== 13) return; // ignore if the pressed key is not 'Enter' key.
        var inputField = document.querySelector(".mx-name-confirmPasswordInput input");
        var btn = document.querySelector(".mx-name-confirmChangePassword");
        if (inputField && btn && document.activeElement === inputField) {
            inputField.blur && inputField.blur(); // not necessary any more in 7.22 and up
            btn.click();
        }
    });
})();

Это должно сработать!