1

我在想要触发的输入上有一个更改事件，除非您单击列表项。基本上我调用一个函数来检查这个字段的变化，但是还有一个自动完成脚本，它在您选择的输入下方添加一个无序列表，当您单击一个项目以填充输入字段时触发更改（本质上是在添加新值之前触发）。这是javascript代码：

document.observe('dom:loaded',function() { 
    new Ajax.Autocompleter("search_input", "found_input", "someurl.jsp", {
        afterUpdateElement: updateSelectedItem,
        minChars: 2
    });
    if ($('search_input') != undefined) {
        $('search_input').observe('change', function(e, el) {
            if (e.explicitOriginalTarget.up(1) != undefined && e.explicitOriginalTarget.up(1).id != "found_input") {
                checkFunction(this.value);
            }
        });
    }
});

我在那里添加了explicitOriginalTarget，因为它适用于Mozilla 浏览器，但这不是跨浏览器解决方案。我还尝试添加一个变量，当您单击无序列表项时会添加该变量，但它会在 search_input 字段之后触发，因为它在 DOM 之后。

感谢您的帮助。

编辑：

你可以在这里看到一个小例子：http: //jsfiddle.net/DfMYE/5/ 如果你开始输入“test”，你会看到一个下拉菜单，其中包含 2 个选项。当你点击一个时，它会触发 change 事件和 select 事件。如果我们单击选择列表，我想停止更改事件。

4

1 回答 1

0

这是我公认的骇人听闻的解决方案：http: //jsfiddle.net/kkFsJ/1/

发生的情况是，通过单击自动完成选项，您正在模糊输入字段，因此提交您键入的任何值，并且在该字段上调度更改事件。这一切都在您能够单击（需要 mouseup）自动完成选项以触发该功能以用您选择的内容替换输入内容之前完成。这是你问题的根源。

我不完全理解的是为什么在您进行自动完成选择后，不会调用另一个更改事件（至少在 Safari 中）。我想知道以编程方式更改输入值是否不会触发更改事件。我可能应该知道是否是这种情况，但我需要对其进行测试。有任何想法吗？

所以 - 我所做的是子类化Autocompleter.Local该类并将onClick回调分配给每个 li 的mousedown事件。这似乎onClick在表单的模糊事件之前触发（因此触发更改）。然后我在输入字段上手动触发更改事件。

我仍然必须设置一个changing标志，以便searchHandler不会为单个自动完成选择多次调用回调。这发生在 Firefox 中。我推迟了这个回调的实际工作，让事件稳定下来，然后关闭changing标志。这是最恶心的部分，对不起。

需要注意的一点是，如果您选择自动完成选项，无论选择的值是否与输入字段中最初的值不同，都会触发更改事件。避免这种情况需要更多地修改自动完成器代码，如果你愿意，我会让你处理。此外，我只在 Mac 上的 FF 和 Safari 中对此进行了测试，因此如果要投入生产，请适当地进行测试和调整。

希望这能奏效，或者至少给你一些想法。如果您或其他任何人对这个问题有不同的看法（除了重写自动完成功能），我很想听听。

于 2012-07-11T04:26:00.290 回答