Searching dynamically using class names with JQuery

Question

Searching dynamically using class names with JQuery

I am seeking to create a dynamic search input based on the class names within the span tags. However, I am struggling with displaying the class name that I have identified. My goal is to show the class names that match the entered value in the input on the screen. Can you assist me with this issue?

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="Search" id="searchinput" />

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

javascript html jquery css

Answer 1

Answer №1

If you want to display the span where the class matches the input, you can use the following code snippet:

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

Check out this demo:

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="Search" id="searchinput" />

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

Answer 2

If you want to display the span where the class matches the input, you can use the following code snippet:

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

Check out this demo:

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="Search" id="searchinput" />

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

Answer 3

Answer №2

If you are in search of a precise match, for example, "test1", then you can use:

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

This code snippet instructs to hide elements that do not have the specified class. (If you want to match any letter, like "t", you can utilize .attr("class").indexOf as mentioned in another response.

Here is the updated code snippet:

$(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="Search" id="searchinput" />

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

Answer 4

If you are in search of a precise match, for example, "test1", then you can use:

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

This code snippet instructs to hide elements that do not have the specified class. (If you want to match any letter, like "t", you can utilize .attr("class").indexOf as mentioned in another response.

Here is the updated code snippet:

$(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="Search" id="searchinput" />

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

Searching dynamically using class names with JQuery

Answer №1

Answer №2

Similar questions

Develop an outline using D3.js for the clipath shape

Determining in Express.js whether headers have been sent or not

Look into HTML and JavaScript problems specific to IOS devices

Animation of CSS with an image depicting a leaf swaying gently in the breeze

The event is not functioning properly with jquery

Is there a way to synchronize breakpoint values across different media queries?

When viewed on a mobile device, the contact information bar should vertically collapse

Adjusting the size of an image based on the size of the window

Ways to send information to browser javascript from Spring MVC controller

Tips on how to decorate a radio button using borders and colors

I am unable to utilize folder paths in CSS within my React application

AngularJS: Enhancing Date Display and Organization

Converting the given data into an object in JavaScript: a step-by-step guide

Ways to reset the selected option when the user chooses a different option using either Jquery or Vanilla JavaScript

Ensure that the <aside> elements span the entire width of their containing parent element

In all tests, except for the initial one, the DOM is not updated by test-utils once triggers have been fired

Challenges encountered in d3.js when parsing through data sets

Having trouble with rendering components in React and Bootstrap?

What sets apart ajax calls from getJSON requests?

Looking to iterate through MongoDB using a promise and a forEach loop? I'm aiming to populate an array