使用jquery搜索多个列表和显示搜索项

<ul id="list1">
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ul>

<ul id="list2">
  <li>Car</li>
  <li>Bike</li>
  <li>Bus</li>
</ul>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<input type="text" id="searchInput" placeholder="Search...">

$(document).ready(function() {
  $('#searchInput').on('keyup', function() {
    var searchText = $(this).val().toLowerCase(); // 获取搜索关键字并转为小写

    $('ul li').each(function() {
      var listItemText = $(this).text().toLowerCase(); // 获取列表项的文本并转为小写

      if (listItemText.indexOf(searchText) === -1) {
        $(this).hide(); // 隐藏不匹配的项
      } else {
        $(this).show(); // 显示匹配的项
      }
    });
  });
});