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

Question

在我的程序中，我有一个表格，我使用输入字段对其进行过滤。 您在搜索/输入字段中输入内容，表格会立即被过滤，无需按 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());
  }
});