Skip to main content

Return to Answer

added 11 characters in body
Source Link
APAD1
APAD1
  • 13.7k
  • 8
  • 47
  • 72

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. YouOne 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>

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. You can do this 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>

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>

Source Link
APAD1
APAD1
  • 13.7k
  • 8
  • 47
  • 72

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. You can do this 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>