Is there a way to apply CSS styles to a specific word within a div that corresponds to the word entered in the search box?

Using a searchbox, you can enter words to find pages with the searched-for word in the page description. If the word is found in the description, a link to the page along with the highlighted word will be displayed. However, I am encountering an issue where the entered word is not being highlighted in the description as intended.

var searchValue = $(".search-query").val(); // The value entered in the search box

$( ".searchResults-description:contains('" + searchValue + "')").css("background-color", "#fadcd9" );

I am seeking assistance to resolve this issue. After clicking the search button, the word remains in the search box. While I have been able to re-enter the word after reloading the page, I now need it to be properly highlighted within the description section whenever it appears.

jqueryhtmlcss

Answer №1

When the page loads, ensure that you are retrieving the value from the search box correctly. The current code snippet shows that the variable searchValue is always empty on load, which may not be the desired behavior. To solve this issue, consider capturing the input value when it changes using a keyup function. Here's a suggestion to help you get 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step-by-step guide on building an engaging Donut chart using jQuery

After spending several hours working on it, I'm struggling to draw my donut graph with JavaScript. Can anyone provide a solution? I am looking for a way to add 25% when one checkbox is selected and +25% when two checkboxes are selected. Thank you in a ...

javascripthtmljquerycss

The Daterangepicker function moment() outputs numerical values

Within my .cshtml file, I have integrated a daterangepicker.js script. This page retrieves the date range (from date, to date) from a parent page using ViewBag. The code snippet is as follows: var _FromDate; var _EndDate; $(function () { var from1 = ...

javascriptjquerymomentjsunix-timestampdaterangepicker

Sending JSON data through an AJAX post request will not work

After struggling for hours trying to debug this issue on my own, I've come to the point of seeking assistance. I need to send a substantial amount of data to an ashx handler and here's how it looks: var value = [{"start":["3,0"],"block":["0,0", ...

jqueryajaxjsonashx

How to Implement Autoplay Feature in YouTube Videos with React

I'm having trouble getting my video to autoplay using react. Adding autoplay=1 as a parameter isn't working. Any ideas? Below is the code I am using. <div className="video mt-5" style={{ position: "relative", paddingBot ...

javascripthtmlcssreactjsyoutube

Use the colResize function in R Shiny to establish communication and synchronize the column sizes between R and

I'm currently using a plugin called datatables.colResize to allow manual column resizing for DataTables in my R Shiny application. My goal now is to save the column width state once a user adjusts the table size. I want this information to be passed a ...

javascriptjqueryrshinydt

Can you identify the issue with this jQuery code snippet?

$("#ckbCheckAll").click(function () { $('div .bulkop .ez-checkbox').toggleClass("ez-checked", this.checked); var id_checkboxes = $('div .bulkop .ez-checkbox input').map(function() { return this.id; }).get(); for ...

jquery

Ways to create intersecting borders at the corners of a division

Is there a technique to expand the borders of a div by 1 or 2 pixels in each direction so that they create a cross at each corner? https://i.stack.imgur.com/mUAxM.png ...

css

When a radio button is checked, add a class to its parent element that has a specific class assigned to it

In order to dynamically add a class to a specific div element higher up the DOM hierarchy when a radio button is clicked, I am in need of assistance. There are multiple instances of these div elements with different radio buttons, so it is crucial that on ...

javascriptjqueryhtml

bootstrap3 container alignment

I encountered a challenge while attempting to right-align multiple Bootstrap 3 containers in a straightforward manner. Despite my efforts, achieving this proved to be more complex than expected. In essence, I faced an issue where aligning the text box with ...

csstwitter-bootstrap-3

Using jQuery to dynamically insert an HTML element into a table

I'm trying to insert a hyperlink into an empty HTML table. This function works perfectly fine on Firefox and Chrome, taking only 0.2 seconds to load. However, when I try it on IE9, it takes at least 3 minutes to display the link. The issue seems to be ...

jqueryhtmladdition

Using jQuery to manipulate text

Can I modify this code to function within "{}" instead of using the .chord tags? (Jquery) //This code transposes chords in a text based on an array var match; var chords = ['C','C#','D','D#','E',&apo ...

javascriptjquery

Tips for sending an array of Objects in a format that can be easily understood by jQuery Ajax

I am working with an asmx web service that includes a function called GetTags: [WebMethod] public List<Tag> GetTags() { List<Tag> TagList = new List<Tag>(); DataTable dt = Helpers.Tags.GetTags(); for ...

c#jqueryasp.netajax

Navigate down to the bottom of the element located on the webpage

I'm trying to create a feature where clicking an anchor tag will smoothly scroll to a specific element on the page. Currently, I am using jquery scrollTo for this purpose. Here's the code snippet: $.scrollTo( this.hash, 1500, { easing:&apos ...

javascriptjquerypluginsscroll

Generating HTML table rows dynamically from objects using Angular's ng-repeat functionality

In my Node-RED setup, I am utilizing the HTML angular code within a "template" node. Within my system, I have an object that consists of circuit boards distinguished by serial numbers. Each circuit board is equipped with two channels, each having its own ...

htmlangularjsobjectnode-red

Looking to dynamically set a background image using data fetched from an API in a ReactJS project

Looking to incorporate a background image from an API response in ReactJS Here is some sample code: useEffect(() => { axios.get(`https://apiaddress=${API_KEY}`) .then(res=>{ console.log(res); setRetrieved(res.data); console.log(retrieved ...

javascriptcssnode.jsreactjs

Ways to specifically target the scrollbar of a scrollable div without affecting its `li` descendants or grandchildren

How can I use jQuery's :not(x) selector? For example, can I exclude a specific HTML element like :not("li")? I've seen the official jQuery documentation mentioning :not(#id) and :not(.class), but what about excluding markup elements l ...

jquery

Ways to avoid extra function loads in JavaScript

I'm currently working on an instant search feature and have some code implemented: $(function() { var timer; $("#searchterm").on('keypress',function() { timer && clearTimeout(timer); timer = setTimeout(doStuff, 800); tim ...

javascriptjqueryhtmlajax

Fraudulent emails targeting my posted ads - beware!

Operating a classifieds website where anyone can view and contact posters without needing to be a member poses certain challenges. One of the main issues I face is the abundance of scam emails being sent to users, attempting to deceive them and steal their ...

phpmysqlhtmlsecurityemail

Using jQuery in CodeIgniter to create a dynamic dropdown list that is dependent

After successfully implementing a working dropdown dependent form, I encountered an issue where hidden input fields within the hidden div were still submitting post values. Is there a way to prevent hidden inputs from being submitted when their parent div ...

jquerycodeigniterdependenciesdrop-down-menu

Center an image both vertically and horizontally within an Owl Carousel arrow slider

I have set up an owl carousel on my page with a customized arrow positioned next to the slider. Currently, it looks like this: https://i.stack.imgur.com/gCfM0.png My goal is to vertically align the arrows and make sure the left arrow is aligned to the le ...

htmlcsstwitter-bootstrap