Question

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

我已经尝试以编程方式按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*};

例如，我从各地尝试过解决方案：

Is it possible to simulate key press events programmatically?

I want to press enter key by programmatically when user do some stuff in js

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

自大约两周以来，我一直在尝试解决此问题，但几乎没有成功。我有没有忽略任何事情，还有没有想到的其他解决方案吗？不使用Mendix是不可行的。这是一个正在进行的大型项目。

Answer 1

首先，弄清文本字段的类和ID以及您感兴趣的按钮。通常它们以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();
        }
    });
})();

那应该可以解决问题！

尝试使用JavaScript片段小部件在Mendix中以编程方式触发Enter

选项1：以编程方式单击搜索按钮

选项2：以编程方式点击Enter

1 个答案: