Привязка jquery Автозаполнение раскрывающегося списка к пунктам меню - PullRequest
0 голосов
/ 24 марта 2020

Существует раскрывающийся список данных, как показано на первом рисунке. Как только я щелкаю один из пунктов в списке, он не связывается с боковым меню левого списка меню. Я хотел бы сделать это, как видно на втором рисунке. После щелчка, он должен искать в списке меню и найти его. все же я использую приведенный ниже код и задаюсь вопросом, есть ли для этого функция 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', "");
    });
  });

Первое изображение

First Picture

Второе изображение

Second Picture

1 Ответ

0 голосов
/ 24 марта 2020

Почти уверен, что вам нужен фильтр, а не автозаполнение.

Пример: 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();
    }
  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...