从jquery到vanila js text.touppercase [关闭]

Question

var vl = $("#minput").val().toUpperCase();

$(".test li").toggle( $("this").text().toUpperCase().indexOf(vl) > -1 );

这不起作用...

Var test = document.querySelector(".test li")
Var vl = minp.value.toUpperCase();

test.toggle(.....…...) 

Answer 1

这应该是正确的 jQuery：

var vl = $("#minput").val().toUpperCase();

$(".test li").each(function() {
  var $li = $(this);
  $li.toggle($li.text().toUpperCase().indexOf(vl) > -1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input id="minput" value="foo">
<hr>
<ul class="test">
  <li>foo</li>
  <li>bar</li>
  <li>foobar</li>
</ul>

这是一个交互式 jQuery 版本：

$("#minput").on('input', function() {
  var searchText = $(this).val().toUpperCase();

  $(".test li").each(function() {
    var $li = $(this);
    $li.toggle($li.text().toUpperCase().indexOf(searchText) > -1);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input type="search" id="minput" value="foo" placeholder="Search...">
<hr>
<ul class="test">
  <li>foo</li>
  <li>bar</li>
  <li>foobar</li>
</ul>

最后，普通的 JS 等价物：

这是一个互动版本：

function toggle(el, show) {
  el.style.display = show ? '' : 'none';
}

document.querySelector("#minput").addEventListener('input', function(e) {
  const searchText = e.target.value.toUpperCase();

  document.querySelectorAll(".test li").forEach(function(li) {
    toggle(li, li.textContent.toUpperCase().includes(searchText));
  });
});

<input type="search" id="minput" value="foo" placeholder="Search...">
<hr>
<ul class="test">
  <li>foo</li>
  <li>bar</li>
  <li>foobar</li>
</ul>