我能夠過濾掉資料，現在如果搜索到的文本不存在，我會嘗試隱藏一個 div。有沒有辦法做到這一點。
<input type="text" placeholder="Search" class=".bar-input">
<div class="xyz"> hide me if searched value doesn't match</div>
<ul class=".myUL">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
$('.bar-input').on('keyup', function() {
var input_val = $('.bar-input').val();
var tags = $('.myUL > li');
var count = tags.length;
for (i = 0; i < count; i ) {
if (!input_val || tags[i].textContent.toLowerCase().indexOf(input_val) > -1) {
tags[i].style['display'] = 'block';
} else {
tags[i].style['display'] = 'none';
}
}
});
uj5u.com熱心網友回復：
在這里，如果這對您有用，請接受。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Search" class="bar-input">
<div class="xyz"> hide me if searched value doesn't match</div>
<ul class="myUL">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
<script>
$('.bar-input').on('keyup', function() {
var input_val = $('.bar-input').val();
var tags = $('.myUL > li');
var count = tags.length;
var match_cnt = 0;
for (i = 0; i < count; i ) {
if (!input_val || tags[i].textContent.toLowerCase().indexOf(input_val) > -1) {
tags[i].style['display'] = 'block';
match_cnt ;
} else {
tags[i].style['display'] = 'none';
}
}
if(match_cnt<1) {
$('.xyz').hide();
} else {
$('.xyz').show();
}
});
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/412016.html
標籤：