jquery - 从结果中选择时，jQuery 自动完成结果下的输入被激活

Question

当我开始输入我正在寻找的物种名称时，jQuery 自动完成小部件带有一个下拉列表和一些结果。太棒了!!

唯一的问题是，当我从列表中选择一个项目时，“位于该列表项目下的输入元素被激活”。并导致顶部出现 android native 下拉菜单。我尝试在自动完成结果框和输入元素上使用 z-indexes。都不起作用。

有什么想法吗？

Answer 1

好吧，传播和 z-index 似乎都无法解决问题。

我找到的唯一方法是将其他字段(除了自动完成的字段之外的所有字段)设置为禁用模式。

因此，当自动完成框打开时，我将所有其他输入设置为禁用，并在框关闭后重置它们:

$("#venue_name").autocomplete({
    minLength: 2,
    source: venueData,
    open: function(event, ui) { // disable other inputs
        $("input#venue_address").attr("disabled", "disabled");
        $("input#venue_cross_street").attr("disabled", "disabled");
        $("input#venue_city").attr("disabled", "disabled");
    },
    close: function(event, ui) { // re-enable other inputs
        $("input#venue_address").removeAttr("disabled");
        $("input#venue_cross_street").removeAttr("disabled");
        $("input#venue_city").removeAttr("disabled");
    }
});

您可以改进上面的代码，例如，将要禁用的元素放入数组等，但基本逻辑保持不变:禁用元素，以便 android 在激活自动完成框时不会突出显示它们，并且一旦自动完成框消失，请重新启用它们。