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

Getting the Right Value: A Step-by-Step Guide to Setting the Default or Selected Value in

Error: Unable to call topFrame.window.changeSelectedBarStyle because it is not a valid function. What could be causing this

Switch between displaying the HTML login and register forms by clicking a button

Applying CSS onmousemove does not function properly in conjunction with Bootstrap framework

Error received when attempting AJAX call with jQuery 1.7.2: NS_ERROR_XPC_NOT_ENOUGH_ARGS

Utilize Vue.js to easily upload images alongside form input fields

conversion of text to number using JavaScript

transferring a JavaScript variable to PHP upon submitting a form

Is there a feature similar to Google/YouTube Insight called "Interactive PNGs"?

Retrieve a single instance of every element within an array using JavaScript

What are some ways to utilize symbol fonts such as marvosym within a web browser?

My code gets disrupted when I use classes instead of IDs

The utilization of the jquery.form.js plugin is resulting in my form being submitted twice

Navigate back to the previous page upon form submission to a PHP file, with a div dynamically populated with targeted content

Is it possible to apply a consistent character width to all glyphs, even the most obscure Unicode symbols, using CSS?

Troubleshooting Issue: Failure of Ajax Script to Display Saved Data in Edit Function

Having trouble creating a unit test for exporting to CSV in Angular

The JQuery error encountered was due to a missing colon after the property ID

Generating JSON data from Dom elements within a specified `div` container

What is the method for extracting a list of properties from an array of objects, excluding any items that contain a particular value?