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

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

更新

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

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

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

Binding jquery AutoComplete dropdown list to menu items

jquery

jquery-ui

autocomplete

menuitem

jquery-ui-autocomplete