Pertanyaan Filter oleh pencarian menggunakan teks yang ditemukan dalam elemen di dalam setiap div


Saya menemukan biola yang berguna untuk menyembunyikan teks berdasarkan teks yang digunakan dalam kotak pencarian, tetapi belum dapat mengetahui cara menyesuaikan metode ini ke div dengan beberapa elemen di dalamnya. Bagaimana saya bisa mengubah jQuery dalam biola terlampir untuk membuatnya menyaring elemen-elemen div yang cocok dengan pencarian yang dimasukkan alih-alih teks yang ditemukan dalam daftar item?

http://jsfiddle.net/point71echo/rof67uy6/2/ 

<input placeholder="Search Me" id="box" type="text" />

<ul class="navList">
    <li>apples</li>
    <li>apricots</li>
    <li>acai</li>
    <li>blueberry</li>
    <li>bananas</li>
    <li>cherry</li>
    <li>coconut</li>
    <li>donut</li>
    <li>durean</li>
</ul>


        <div class="connect-cat" catname="apples" style="visibility: visible; display: block;">
            <a href="/connect/apples">
                <div style="padding:5px;cursor:pointer;">
                    <div>
                        <img width="60" class="cat-logo" src="http://t2.gstatic.com/images?q=tbn:ANd9GcS0rYdTsHK-IwuWCNA_xXq44v76dFH2wPc5wdErF9yWHty-wqY4Bg" alt="apples">
                    </div>
                    <span>apples</span>
                </div>
            </a>
        </div>



        <div class="connect-cat" catname="apricots" style="visibility: visible; display: block;">
            <a href="/connect/apricots">
                <div style="padding:5px;cursor:pointer;">
                    <div>
                        <img width="60" class="cat-logo" src="http://t2.gstatic.com/images?q=tbn:ANd9GcS0rYdTsHK-IwuWCNA_xXq44v76dFH2wPc5wdErF9yWHty-wqY4Bg" alt="apricots">
                    </div>
                    <span>apricots</span>
                </div>
            </a>
        </div>

Inilah jQuery yang digunakan:

$('#box').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    if(valThis == ""){
        $('.navList > li').show();
    } else {
        $('.navList > li').each(function(){
            var text = $(this).text().toLowerCase();
            (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
        });
   };
});

4
2017-11-24 01:18


asal


Jawaban:


Jika saya perlu menambahkan elemen teks lain ke setiap kotak div, apakah ada cara agar semua teks di setiap div dapat dicari? Berikut biola dengan satu elemen teks tambahan - jsfiddle.net/point71echo/mttgj1tt/1 - point71echo

Berikut ini adalah solusi untuk mencari dua elemen sekaligus di JavaScript asli, tanpa pustaka.

document.getElementById("box").onkeyup=function(){
  var matcher = new RegExp(document.getElementById("box").value, "gi");
  for (var i=0;i<document.getElementsByClassName("connect-cat").length;i++) {
    if (
      matcher.test(document.getElementsByClassName("name")[i].innerHTML) || 
      matcher.test(document.getElementsByClassName("category")[i].innerHTML)
    ) {
      document.getElementsByClassName("connect-cat")[i].style.display="inline-block";
    } else {
      document.getElementsByClassName("connect-cat")[i].style.display="none";
    }
  }
}

JSFiddle

Jika Anda ingin menggunakan jQuery untuk membuatnya lebih mudah dibaca (fungsi-fungsi DOM lama yang bodoh):

$("#box").on('keyup', function(){
  var matcher = new RegExp($(this).val(), 'gi');
  $('.connect-cat').show().not(function(){
      return matcher.test($(this).find('.name, .category').text())
  }).hide();
});

JSFiddle


11
2017-11-24 02:01



Ini seharusnya hanya cocok dengan div dengan class connect-cat, dan filter berdasarkan span di dalamnya.

$('#box').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    if(valThis === ""){
        $('div.connect-cat').show();
    } else {
        $('div.connect-cat').each(function(){
            var text = $(this).find('span').text().toLowerCase();
            if (text.indexOf(valThis) >= 0) { $(this).show(); }
            else { $(this).hide(); }
        });
   }
});

http://jsfiddle.net/reyjose/40u0var6/


2
2017-11-24 01:54



$('#box').keyup(function(){
    var valThis = $(this).val().toLowerCase();
        if(valThis == ""){
            $('.connect-cat').show();
        } else {
            $('.connect-cat').each(function(){
            var text = $(this).find("span").text().toLowerCase();
            (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
        });
    };
});

Jika Anda memiliki beberapa "rentang" di div, cukup tambahkan nama kelas untuk itu. Kemudian berubah

var text = $(this).find("span").text().toLowerCase();

untuk:

var text = $(this).find(".spanClassName").text().toLowerCase();


1
2017-11-24 01:51



Filter oleh pencarian menggunakan teks yang ditemukan dalam elemen dalam setiap tombol klik div: enter image description here


0
2017-10-25 15:01