2

我有一个带有搜索功能的 DataGrid，我希望网站在搜索栏中按下每个键时自动刷新网格，就像现代搜索引擎一样。想象一下，就像在按下每个键后按回车键，或单击搜索按钮。在 Mendix 中做到这一点的唯一方法是使用外部小部件（不能使用它们，因为它们中的大多数都无法在数据库中搜索相关实体）或使用我所做的 JavaScript Snippets。

我已经尝试以编程方式按 Enter 键，但我无法获取代码来执行此操作。

我尝试的另一个选项是在按下每个键后以编程方式单击搜索栏，这本身就有效，但这里的问题是选择跳出输入字段并进入搜索按钮，并且搜索字段中也没有输入。

选项 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

它与上面的代码几乎相同，也是我更喜欢的方式。

我尝试了许多变体，但最后我想要的唯一东西应该是这样的：

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

我尝试了来自各地的解决方案，例如：

是否可以以编程方式模拟按键事件？

当用户在 js 中执行某些操作时，我想以编程方式按 Enter 键

和许多其他来源，一些人声称由于安全原因这是不可能的。真的吗？

大约两周以来，我一直在尝试解决这个问题，但几乎没有成功。我是否忽略了任何事情，是否还有其他我没有想到的解决方案？不使用 Mendix 不是一个选项。这是一个巨大的工作项目。

4

1 回答 1

0

首先，找出文本字段的类和 id 以及您感兴趣的按钮。通常以mx-name-前缀开头。在本例中，它们被称为mx-name-confirmPasswordInputand 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();
        }
    });
})();

这应该够了吧！

于 2019-07-22T15:36:28.600 回答