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

Question

在我的程序中，我有一个用输入字段过滤的表。您在搜索/输入字段中键入内容，表格会立即得到过滤，而无需按回车键。

现在我想为这个输入字段添加自动完成功能，它起作用了，但有一个问题。当我开始在输入字段中输入内容时，我会得到建议。现在我可以点击一个建议，它会被写在输入字段中。那很好用。但是在我按下回车键之前，我的表格不会被过滤，这就是我的问题。如何使其在选择建议后无需按回车键自动提交/过滤表格？

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

$("#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/

您的问题是您只将过滤事件 Hook 到 "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());
  }
});