Question

在我的程序中，我有一个表，该表使用输入字段进行过滤。您在搜索/输入字段中键入内容，该表将立即过滤，而无需按Enter键。

现在，我想向此输入字段添加自动完成功能，它可以正常工作，但是存在一个问题。当我开始在输入字段中输入内容时，会得到一些建议。现在，我可以单击一个建议，该建议将被写在输入字段中。那很好。但是我的表格直到我按Enter才被过滤，这就是我的问题。在选择建议后，如何使它自动提交/过滤表格而无需按Enter键？

这是我的两个过滤和自动完成功能。

$("#searchInput").autocomplete({
    source: availableTags, //array with all possible search results of the table
});

$(document).ready(function(){
    $("#searchInput").on("keyup", function () {
        var value = $(this).val().toLowerCase();
        $("#contractTable tr").filter(function(){
             $(this).toggle($(this).find(".target").text().toLowerCase().indexOf(value) > -1) // I only want to search for two specific  cells of every row thats why I use find(".target")
        });
    });
});

我希望您能得到我想要达到的目标，并且附带一提，我对JavaScript和jQuery还是很陌生，所以请对我宽容：）

Answer 1

在这里，我为您修复了该问题： https://jsfiddle.net/eakumopw/1/

您的问题是您仅将过滤事件挂接到"keyup"。但是，选择自动完成建议不是关键事件。添加另一个事件也不能解决问题，因为建议框是一个不同的元素。

我检查了jquery-autocomplete支持（http://tutorialspark.com/jqueryUI/jQuery_UI_AutoComplete_Events.php）的哪些事件，并发现close()事件是适合我的解决方案。

我将过滤过程外包到一个新函数doFilter( value )中，并在jquery-autcomplete的close事件上对该函数进行了调用。

$("#myInput").autocomplete({
  source: availableTags,
  close: function(event, ui) {
    console.log("close");
    doFilter($("#myInput").val().toLowerCase());
  }
});

jQuery自动完成过滤器表的输入字段

1 个答案: