如果關鍵字匹配，我如何顯示div

如果搜索到的關鍵字匹配，我可以顯示匹配的輸入文本及其相關的 div 和類別名稱。現在我正在嘗試搜索類別名稱。如果搜索到的關鍵字與類別名稱匹配，則此 div 應該可見。此外，如果搜索的關鍵字與輸入名稱匹配，則其類別名稱也可見。

$('.bar-input').on('keyup', function() {
            var search_input = $(this).val().toLowerCase();
            var tags = $('.wrap label');
            var count = tags.length;
            var text_input = $(this).val().length;
            var category = $('.category-type');
           

            // // searching for tags
            for (i = 0; i < count; i  ) {
                if (!search_input || tags[i].textContent.toLowerCase().indexOf(search_input) > -1) {
                    tags[i].parentNode.style['display'] = 'block';

                } else {
                    tags[i].parentNode.style['display'] = 'none';
                }
            }

            // If no tags found category will be hidden 
            $(".category").not(".stcw-screen").map(function() {
                let flag = true;
                $(this).find('.wrap').map(function() {
                    if ($(this).css("display") != "none") {
                        flag = false;
                    }
                });
                if (flag) {
                    $(this).css("display", "none");
                } else {
                    $(this).css("display", "block");
                }
            });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="bar-input" type="text" placeholder="search">
    <div class="category">
        <div class="category-name">
            <h5>Country</h5>
        </div>
        <div class="options">
            <div class="wrap">
                 <label><input type="checkbox">America</label>
            </div><div class="wrap">
                <label><input type="checkbox">France</label>
           </div>
        </div>
    </div>
    <div class="category">
        <div class="category-type">
            <h5>Sports</h5>
        </div>
        <div class="options">
            <div class="wrap">
                 <label><input type="checkbox">Football</label>
            </div><div class="wrap">
                <label><input type="checkbox">Cricket</label>
           </div>
        </div>
    </div>
    <div class="category">
        <div class="category-type">
            <h5>Operating system </h5>
        </div>
        <div class="options">
            <div class="wrap">
                 <label><input type="checkbox">linux</label>
            </div><div class="wrap">
                <label><input type="checkbox">windows</label>
           </div>
        </div>
    </div>

uj5u.com熱心網友回復：

要執行您需要的操作，您可以遍歷每個類別并首先 使用不區分大小寫的實作來.category-type確定搜索詞是否匹配，然后顯示該部分并顯示所有選項，或者如果不是，您可以使用輪流查看每個選項相同的選擇器并單獨顯示它們。:contains:icontains()

邏輯看起來像這樣：

// case-insensitive :contains implementation (credit: https://stackoverflow.com/a/8747204/519413)
jQuery.expr[':'].icontains = (a, i, m) => $(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;

var $categories = $('.category');
var $types = $('.category-type');

$('.bar-input').on('input', function() {
  var search_input = $(this).val().toLowerCase().trim();
  if (search_input.length == 0) {
    // no search term entered, reset state to show all items
    $('.wrap label').add($types).show()
    return;
  }

  $categories.each((i, category) => {
    let $cat = $(category);
    let $type = $cat.find('.category-type').hide();
    let $labels = $cat.find('.wrap label').hide();

    if ($type.is(`:icontains("${search_input}")`)) {
      // match on category type, show category-type and all child options
      $type.add($labels).show();
    } else {
      // no match on category, show only if match on child option
      let $matches = $labels.filter(`:icontains("${search_input}")`).show();
      $type.toggle($matches.length > 0);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="bar-input" type="text" placeholder="search">

<div class="category">
  <div class="category-type">
    <h5>Country</h5>
  </div>
  <div class="options">
    <div class="wrap">
      <label><input type="checkbox">America</label>
    </div>
    <div class="wrap">
      <label><input type="checkbox">France</label>
    </div>
  </div>
</div>
<div class="category">
  <div class="category-type">
    <h5>Sports</h5>
  </div>
  <div class="options">
    <div class="wrap">
      <label><input type="checkbox">Football</label>
    </div>
    <div class="wrap">
      <label><input type="checkbox">Cricket</label>
    </div>
  </div>
</div>
<div class="category">
  <div class="category-type">
    <h5>Operating system </h5>
  </div>
  <div class="options">
    <div class="wrap">
      <label><input type="checkbox">linux</label>
    </div>
    <div class="wrap">
      <label><input type="checkbox">windows</label>
    </div>
  </div>
</div>

標籤：

上一篇：JS條件與map和reduce

下一篇：根據下拉選單中選擇的專案反應更改內容