как получить div внутри ul-li-a и сделать равным внутри текста div

Question

У меня есть кэшированный список внутри кнопки поиска, и как только я выберу один из них, он должен вызвать меню и подобрать правильный. Однако я не мог понять, как сравнить innerText из div с выбранным из области поиска. a и div должны быть видны.

$(function() {
  function filterTable(tbl, term) {

    $("ul li a", tbl).show();
    $("ul li a", tbl).each(function(i, r) {
      if ($("div:eq(0)", r).text().toLowerCase().indexOf(term.toLowerCase()) < 0) {
        $(r).hide();
      }
    });
  }

  $("#txtsearch").autocomplete({
    source: ["ERP", "Finans Muhasebe", "Banka"],
    select: function(e, ui) {
      filterTable($("table"), ui.item.value);
    },
    minLength: 0
  }).keyup(function() {
    if ($(this).val() == "") {
      $("ul li a").show();
    }
  }).click(function() {
    $(this).autocomplete('search', "");
  })
});

.wrap_atletas_interno img {
  line-height: 0;
}

.wrap_atletas_interno li {
  float: left;
  margin-right: 11px;
  border: 3px solid #d0d2d6;
  line-height: 0;
  position: relative;
  width: 86px;
  height: 86px;
}

.wrap_atletas_interno li .nome_86_atleta {
  position: absolute;
  width: 75px;
  padding: 8px;
  padding-right: 0px;
  background: #d0d2d6;
  color: #243769;
  font-size: 13px;
  font-style: italic;
  z-index: 1;
  bottom: 6px;
  left: 0px;
}

.wrap_atletas_interno li.atleta_atual {
  border: 3px solid #c91700;
}

.wrap_atletas_interno li.atleta_atual .nome_86_atleta {
  background: #c91700;
  color: #ffffff;
}

.wrap_atletas_interno li.ultimo {
  margin-right: 0;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
  <input id="txtsearch" type="text" placeholder="Search Here..." />
</div>
<ul class="menu-content openMenu">
  <li class="menuItem">
    <a href="javascript:void(0)">
      <div class="iconBox color-ER">E</div><span class="title">ERP</span><span class="arrow"></span>
    </a>
    <ul class="sub-menu">
      <li id="0"><a href="javascript:void(0)"><i class="fa fa-cube fa-lg"></i><span class="title">Finans Muhasebe</span><span class="arrow"></span></a>
        <ul class="sub-menu">
          <li><a href="javascript:void(0)">Cari<span class="arrow"></span></a>
            <ul class="sub-menu">
              <li>
                <a href="/index.cfm?fuseaction=ch.list_caris">
                  <div class="objectText">Cari İşlemler</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=ch.list_company_extre">
                  <div class="objectText">Cari Extre</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=ch.payment_track&amp;money_info">
                  <div class="objectText">Borç Alacak Dökümü</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=ch.form_add_debit_claim_note">
                  <div class="objectText">Dekont Ekle</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=ch.form_add_cari_to_cari">
                  <div class="objectText">Cari Virman Ekle</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=ch.form_add_cari_rate_valuation">
                  <div class="objectText">Kur Değerleme İşlemleri | CARİ</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=ch.form_upd_account_open">
                  <div class="objectText">Dönem Açılışı</div><span class="objectAdd"></span>
                </a>
              </li>
            </ul>
          </li>
          <li><a href="javascript:void(0)">Banka<span class="arrow"></span></a>
            <ul class="sub-menu">
              <li>
                <a href="/index.cfm?fuseaction=bank.list_bank_account">
                  <div class="objectText">Banka Hesapları</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.list_bank_actions">
                  <div class="objectText">Banka İşlemleri</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.form_add_virman">
                  <div class="objectText">Döviz Alış Satış Virman İşlemi</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.list_assign_order">
                  <div class="objectText">Banka Talimatları</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.form_add_invest_money">
                  <div class="objectText">Para Yatırma</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.form_add_gelenh">
                  <div class="objectText">Gelen Havale</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.list_creditcard_revenue">
                  <div class="objectText">Kredi Kartı Tahsilatları</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.list_credit_card_expense">
                  <div class="objectText">Kredi Kartıyla Ödemeler</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.form_add_get_money">
                  <div class="objectText">Para Çekme</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.form_add_gidenh">
                  <div class="objectText">Giden Havale</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.list_payment_credit_cards">
                  <div class="objectText">Kredi Kartı Hesaba Geçiş</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=finance.list_creditcard">
                  <div class="objectText">Kredi Kartları</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.form_add_bank_rate_valuation">
                  <div class="objectText">Kur Değerleme İşlemleri | BANK</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.list_bank_autopayment_export">
                  <div class="objectText">Otomatik Ödeme İşlemleri</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.form_add_term_deposit">
                  <div class="objectText">Vadeli Mevduat Hesaba Yatır</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.list_bank_autopayment_import">
                  <div class="objectText">Otomatik Ödeme İşlemleri Dönüşleri</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.interest_revenue">
                  <div class="objectText">Vadeli Mevduat Getiri Listesi</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=finance.list_bank_branch">
                  <div class="objectText">Banka Şubeleri</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.form_add_bank_account_open">
                  <div class="objectText">Hesap Açılışı</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=finance.list_bank_types">
                  <div class="objectText">Bankalar</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=finance.list_bank_pos">
                  <div class="objectText">Pos Tanımları</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.list_pos_operation">
                  <div class="objectText">Otomatik Sanal Pos Kuralları</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=finance.list_credit_payment_types">
                  <div class="objectText">Kredi Kartı Ödeme/Tahsil Yöntemleri</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=settings.list_pos_relation">
                  <div class="objectText">Sanal Pos Tanımları</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.wodiba_bank_actions">
                  <div class="objectText">WoDiBa Banka İşlemleri</div><span class="objectAdd"></span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Вот jsfiddle

ОБНОВЛЕНО:

Не все элементы подменю должны быть видны, кроме class="objectAdd". если пользователь набрал «Cari», все соответствующие «Cari», имеющие класс objectAdd, должны быть видны. Добавлен пример изображения.

Answer 1

Поскольку вы больше не используете table, вы должны рассмотреть, как это влияет на структуру HTML. Это изменит ваши функции и некоторые селекторы.

Примите во внимание следующее.

$(function() {
  function filterGroup(el, term) {
    $("ul > li", el).show();
    $("ul > li", el).each(function(i, r) {
      if ($("a > div", r).text().toLowerCase().indexOf(term.toLowerCase()) < 0) {
        $(r).hide();
      }
    });
  }

  $("#txtsearch").autocomplete({
    source: ["ERP", "Finans Muhasebe", "Banka"],
    select: function(e, ui) {
      filterGroup($(".sub-menu").parent(), ui.item.value);
    },
    minLength: 0
  }).keyup(function() {
    if ($(this).val() == "") {
      $("li").show();
    }
  }).click(function() {
    $(this).autocomplete('search', "");
  })
});

.wrap_atletas_interno img {
  line-height: 0;
}

.wrap_atletas_interno li {
  float: left;
  margin-right: 11px;
  border: 3px solid #d0d2d6;
  line-height: 0;
  position: relative;
  width: 86px;
  height: 86px;
}

.wrap_atletas_interno li .nome_86_atleta {
  position: absolute;
  width: 75px;
  padding: 8px;
  padding-right: 0px;
  background: #d0d2d6;
  color: #243769;
  font-size: 13px;
  font-style: italic;
  z-index: 1;
  bottom: 6px;
  left: 0px;
}

.wrap_atletas_interno li.atleta_atual {
  border: 3px solid #c91700;
}

.wrap_atletas_interno li.atleta_atual .nome_86_atleta {
  background: #c91700;
  color: #ffffff;
}

.wrap_atletas_interno li.ultimo {
  margin-right: 0;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
  <input id="txtsearch" type="text" placeholder="Search Here..." />
</div>
<ul class="menu-content openMenu">
  <li class="menuItem">
    <a href="javascript:void(0)">
      <div class="iconBox color-ER">E</div><span class="title">ERP</span><span class="arrow"></span>
    </a>
    <ul class="sub-menu">
      <li id="0"><a href="javascript:void(0)"><i class="fa fa-cube fa-lg"></i><span class="title">Finans Muhasebe</span><span class="arrow"></span></a>
        <ul class="sub-menu">
          <li><a href="javascript:void(0)">Cari<span class="arrow"></span></a>
            <ul class="sub-menu">
              <li>
                <a href="/index.cfm?fuseaction=ch.list_caris">
                  <div class="objectText">Cari İşlemler</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=ch.list_company_extre">
                  <div class="objectText">Cari Extre</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=ch.payment_track&amp;money_info">
                  <div class="objectText">Borç Alacak Dökümü</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=ch.form_add_debit_claim_note">
                  <div class="objectText">Dekont Ekle</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=ch.form_add_cari_to_cari">
                  <div class="objectText">Cari Virman Ekle</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=ch.form_add_cari_rate_valuation">
                  <div class="objectText">Kur Değerleme İşlemleri | CARİ</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=ch.form_upd_account_open">
                  <div class="objectText">Dönem Açılışı</div><span class="objectAdd"></span>
                </a>
              </li>
            </ul>
          </li>
          <li><a href="javascript:void(0)">Banka<span class="arrow"></span></a>
            <ul class="sub-menu">
              <li>
                <a href="/index.cfm?fuseaction=bank.list_bank_account">
                  <div class="objectText">Banka Hesapları</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.list_bank_actions">
                  <div class="objectText">Banka İşlemleri</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.form_add_virman">
                  <div class="objectText">Döviz Alış Satış Virman İşlemi</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.list_assign_order">
                  <div class="objectText">Banka Talimatları</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.form_add_invest_money">
                  <div class="objectText">Para Yatırma</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.form_add_gelenh">
                  <div class="objectText">Gelen Havale</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.list_creditcard_revenue">
                  <div class="objectText">Kredi Kartı Tahsilatları</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.list_credit_card_expense">
                  <div class="objectText">Kredi Kartıyla Ödemeler</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.form_add_get_money">
                  <div class="objectText">Para Çekme</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.form_add_gidenh">
                  <div class="objectText">Giden Havale</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.list_payment_credit_cards">
                  <div class="objectText">Kredi Kartı Hesaba Geçiş</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=finance.list_creditcard">
                  <div class="objectText">Kredi Kartları</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.form_add_bank_rate_valuation">
                  <div class="objectText">Kur Değerleme İşlemleri | BANK</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.list_bank_autopayment_export">
                  <div class="objectText">Otomatik Ödeme İşlemleri</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.form_add_term_deposit">
                  <div class="objectText">Vadeli Mevduat Hesaba Yatır</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.list_bank_autopayment_import">
                  <div class="objectText">Otomatik Ödeme İşlemleri Dönüşleri</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.interest_revenue">
                  <div class="objectText">Vadeli Mevduat Getiri Listesi</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=finance.list_bank_branch">
                  <div class="objectText">Banka Şubeleri</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.form_add_bank_account_open">
                  <div class="objectText">Hesap Açılışı</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=finance.list_bank_types">
                  <div class="objectText">Bankalar</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=finance.list_bank_pos">
                  <div class="objectText">Pos Tanımları</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.list_pos_operation">
                  <div class="objectText">Otomatik Sanal Pos Kuralları</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=finance.list_credit_payment_types">
                  <div class="objectText">Kredi Kartı Ödeme/Tahsil Yöntemleri</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=settings.list_pos_relation">
                  <div class="objectText">Sanal Pos Tanımları</div><span class="objectAdd"></span>
                </a>
              </li>
              <li>
                <a href="/index.cfm?fuseaction=bank.wodiba_bank_actions">
                  <div class="objectText">WoDiBa Banka İşlemleri</div><span class="objectAdd"></span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>