将jquery自动完成下拉列表绑定到菜单项

Question

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

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

   $(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/18/

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