将 jquery AutoComplete 下拉列表绑定到菜单项

Question

如第一张图片所示，有一个下拉列表数据。一旦我单击列表中的一项，它就不会与侧边栏左侧菜单列表绑定。我想让它如第二张图片所示。单击后，它应该搜索菜单列表并找到一个。但是我使用下面的代码并想知道是否有 Jquery 的功能可以做到这一点。

注意：它以某种方式与谷歌自动完成功能一起使用。

   $(document).ready(function () {
    $("#leftMenuSearch").autocomplete({
      source: list,
      minLength: 0,
      select: function (event, ui) {
        // that's how get the menu reference:
      }
    }).click(function () {
      console.log("this", this)
      $(this).autocomplete('search', "");
    });
  });

第一张照片

第二张图片

Answer 1

很确定您想要的是过滤器而不是自动完成功能。

示例：https://jsfiddle.net/Twisty/Lu57qpxh/11/

JavaScript

$(function() {
  function filterTable(tbl, term) {
    $("tbody tr", tbl).show();
    $("tbody tr", tbl).each(function(i, r) {
      if ($("td:eq(0)", r).text().toLowerCase().indexOf(term) < 0) {
        $(r).hide();
      }
    });
  }

  $("#txtsearch").keyup(function() {
    var t = $(this).val().toLowerCase();
    filterTable($("table"), t);
  });
});

这会根据搜索词显示或隐藏表格中的项目。

更新

如果您想将其与自动完成一起使用，您可以这样做。

示例：https://jsfiddle.net/Twisty/Lu57qpxh/22/

$(function() {
  function filterTable(tbl, term) {
    $("tbody tr", tbl).show();
    $("tbody tr", tbl).each(function(i, r) {
      if ($("td:eq(0)", r).text().toLowerCase().indexOf(term.toLowerCase()) < 0) {
        $(r).hide();
      }
    });
  }

  $("#txtsearch").autocomplete({
    source: ["Spiderman", "Wonder", "hata"],
    select: function(e, ui) {
      filterTable($("table"), ui.item.value);
    }
  }).keyup(function() {
    if ($(this).val() == "") {
      $("table tbody tr").show();
    }
  });
});