In the following example:
<li class="link" data-tag="these are tags to help find the link within the list"><a href="https://www.google.com" target="_blank">Super cool link</a></li>
<li class="link" data-tag="another TAG for awesome site"><a href="https://www.google.com" target="_blank">Another Awesome and Cool Site</a></li>
These two list items contain a custom attribute called data-tag and within the list item, there's a hyper link with whatever text is there.
I want to enter any of the words in ANY order, and hide any <li></li> tags that do not match the total words.
Now with the following javascript below...
$(document).on("input", "#find-link", function() {
// Get the value of the textbox
var linkSearchValue = $(this).val().toLowerCase();
// Cycle through the list of links
$(".link").each(function(i) {
// If the searchbox is NOT empty
if (linkSearchValue != "") {
// Get the tags and text to compare against
var linkTags = $(this).attr("data-tag");
var linkText = $(this).text();
if ( (!linkTags.toLowerCase().includes(linkSearchValue)) && (!linkText.toLowerCase().includes(linkSearchValue)) ) { // Check if the search string DOESN'T match...
// If there isn't a match for a link, hide it.
$(this).addClass("hidden-link");
} else {
// If there IS a match for a link, show it.
$(this).removeClass("hidden-link");
}
} else {
$(this).removeClass("hidden-link");
}
});
});
I can enter words into the text box in order... for instance, "cool" will show both links. "Awesome" shows only the second link. However, if I type "cool awesome", neither link shows.
How can I better structure the JavaScript code (jQuery or pure JS is fine) to ignore the order of the words, and simply look for the instance of the words, or series of characters? I was thinking I would have to either convert both the results of $(this).attr("data-tag"); and $(this).text(); into an array but I have no clue how I would go about doing that, and I'm completely stumped.
