-2

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.

Aries Azad
  • 346
  • 1
  • 4
  • 23
  • Can you explain what is not working? I've tested your code in this context and it works fine https://jsfiddle.net/qht2xy4g/ – jerrylow Mar 01 '19 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. – JBis Mar 01 '19 at 20:53
  • 2
    OP, please add some html so we know the format of the descriptions – JBis Mar 01 '19 at 20:53

1 Answers1

-1

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>
APAD1
  • 13,509
  • 8
  • 43
  • 72