如何防止onSelect事件在DevBridge jQuery Autocomplete中触发两次

当你单击已经具有选定选项的输入时, DevBridge jQuery Autocomplete的每个开发人员在开发开始时都会遇到的一个典型问题是, 它在自动完成方面非常令人沮丧。考虑以下示例：

var countries = [
    { value: 'Andorra', data: 'AD' }, { value: 'Zimbabwe', data: 'ZZ' }
];

$('#autocomplete').autocomplete({
    lookup: countries, onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

用户选择一个选项后, 将按预期触发onSelect回调。但是, 如果用户再次在输入中单击并且里面已经有一个选项, 则回调将再次触发, 这显然是我们不希望的。由于某种原因, 即使在较新的版本中, 这种情况仍然会发生, 因为似乎有些人需要这种行为。就我而言, 我不需要这个, 因此有必要解决。

解

不过, 解决方案非常简单, 因为至少有一个选项(在文档中很难找到或理解), 可以防止这种情况的发生。此属性是triggerSelectOnValidInput, 在这种情况下, 我想要的是false：

triggerSelectOnValidInput: false

因此, 你可以使用此选项初始化自动完成功能, 以防止出现此问题：

var countries = [
    { value: 'Andorra', data: 'AD' }, { value: 'Zimbabwe', data: 'ZZ' }
];

$('#autocomplete').autocomplete({
    lookup: countries, triggerSelectOnValidInput: false, onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

现在, 仅当用户搜索内容并从自动完成下拉列表中选择内容时, 才会触发回调。

编码愉快！