如何在 ul-li-a 中获取 div 并使 div 的内部文本相等

Question

I have a cached list inside search button and once I choose one of them it should trigger the menu and pick up the right one. However I could not figure out how to compare the innerText of a div with the chosen one from the search area. Both a and div should be visible.

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

Here is the jsfiddle

UPDATED:

Not all sub-menu elements should be visible, except for the class="objectAdd" . if the user has typed 'Cari', all relevant 'Cari' which has objectAdd class must be visible. An example picture has been added.

Answer 1

Since you're no longer using a table , you have to consider how that effects the HTML Structure. This will change your functions and some of the selectors.

Consider the following.

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