How can I add css to a word inside a div that matches the word from the search box? [duplicate]

Question

I have a searchbox where you can search for words and pages will display with the searched-for word in the description of the page(meaning if the word you searched for is in the description of the page then it will display a link to the page and the description of the page). I need to be able to take the word searched-for and from the description that is displayed in the result, I need that word highlighted in the description. Here is what I have so far. But this is not working.

var searchValue = $(".search-query").val(); //searchValue is the word you type in the input box $( ".searchResults-description:contains('" + searchValue + "')").css("background-color", "#fadcd9" );

please help! When I click search the word stays in my searchbox. I slapped it back in the input box after page reload. but not I need this word to be highlighted in the description div, whereever this word shows up in it.

Can you explain what is not working? I've tested your code in this context and it works fine jsfiddle.net/qht2xy4g — jerrylow
– jerrylow, Commented Mar 1, 2019 at 20:50
tl;dr The OP what's the search box to acts as a filtering CMD/CTR + F for the descriptions. Highlighting ONLY the actual word in the description. — user7886229
– user7886229, Commented Mar 1, 2019 at 20:53
OP, please add some html so we know the format of the descriptions — user7886229
– user7886229, Commented Mar 1, 2019 at 20:53

APAD1 · Accepted Answer · 2019-03-01 20:51:30Z

You're checking for the value of the search box on page load, so the searchValue variable is always going to be empty. What you need to do is get the value when the input changes. One way you can do this is with a keyup function. This should get you started:

$(function() { $('.search-query').keyup(function() { var searchValue = $(".search-query").val(); $( ".searchResults-description:contains('" + searchValue + "')").css("background-color", "#fadcd9" ); }); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="search-query" /> <div class="searchResults-description">Lorem</div> <div class="searchResults-description">Ipsum</div>

i mean... we don't really know that... it may have just been left out of the question. We don't even know what "not working" means in this case.
"This should get you started." I was simply explaining why the code OP provided was not working. I'm not going to assume to know the exact functionality they're looking for.

Collectives™ on Stack Overflow

How can I add css to a word inside a div that matches the word from the search box? [duplicate]

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related