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());
  }
});