Dynami c поиск по имени класса с JQuery

Question

Я хочу сделать динамический c поисковый ввод в соответствии с именами классов в тегах я бы хотел охватить. Однако у меня возникли проблемы с указанием имени класса, которое я нашел. Моя цель; Отображение имен классов, соответствующих значению, введенному во входные данные на экране . Не могли бы вы помочь мне с этим топи c?

jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
    .indexOf(m[3].toUpperCase()) >= 0;
};

$(document).ready(function() {
  $("#searchinput").keyup(function() {
    var inputvalue = $("#searchinput").val();
    var spantags = $("#iconlist span");


    if (inputvalue.length == 0) {
      spantags.show();
    } else {
      if (spantags.hasClass(inputvalue)) {
        $("#iconlist span").hide();
      }
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" placeholder="Ara" id="searchinput" />

<div id="iconlist">
  <span class="test1">Deneme-1</span>
  <span class="test2">Deneme-2</span>
  <span class="test3">Deneme-3</span>
  <span class="test4">Deneme-4</span>
</div>

Answer 1

В случае, если вы ищете точное совпадение, например, «test1», тогда вы вызываете использование

spantags.filter(":not(." + inputValue + ")").hide()

, которое говорит, чтобы скрыть все, что не имеет введенного вами класса (в случае где вы хотите сопоставить любую букву, например, «t», используйте .attr("class").indexOf, как в другом ответе.

Обновленный фрагмент:

$(document).ready(function() {
  $("#searchinput").keyup(function() {
    var inputValue = $("#searchinput").val();
    var spantags = $("#iconlist span");

    spantags.show();
    if (inputValue !== "") {
        spantags.filter(":not(." + inputValue + ")").hide()
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" placeholder="Ara" id="searchinput" />

<div id="iconlist">
  <span class="test1">Deneme-1</span>
  <span class="test2">Deneme-2</span>
  <span class="test3">Deneme-3</span>
  <span class="test4">Deneme-4</span>
</div>

Answer 2

Вы можете попытаться использовать что-то подобное для отображения диапазона, в котором класс соответствует входу.

spantags.filter(function() {
  return $(this).attr("class").indexOf(inputvalue) > -1;
}).show();

Демо

jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
    .indexOf(m[3].toUpperCase()) >= 0;
};

$(document).ready(function() {
  $("#searchinput").keyup(function() {
      var inputvalue = $("#searchinput").val();
      var spantags = $("#iconlist span");
      spantags.hide();
      spantags.filter(function() {
        return $(this).attr("class").indexOf(inputvalue) > -1;
      }).show();
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" placeholder="Ara" id="searchinput" />

<div id="iconlist">
  <span class="test1">Deneme-1</span>
  <span class="test2">Deneme-2</span>
  <span class="test3">Deneme-3</span>
  <span class="test4">Deneme-4</span>
</div>