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

Finding the actual path in any scenario using JavaScript ($.ajax)

Here is the structure of my project: Sil -> css -> js -> clients -> index.php -> response.php index.php I am facing an issue related to the folder 'clients'. My website URL can have different va ...

javascriptjqueryajax.htaccess

Personalizing the scheduleWeek display in Full Calendar

I'm looking to personalize the agendaWeek view of FullCalendar by swapping the axes. Currently, the seven days of the week are shown at the top and time slots (12 am to 11:59 pm) are displayed on the left. I'd like to switch their positions. Ess ...

jqueryfullcalendar

Having trouble integrating JQuery Mobile into ReactJS - Unable to find a solution for 'jquery-mobile' package

I've been attempting to integrate JQM into my ReactJS project. Here's what I'm doing to add it: npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="107a616575626950213e21213e21">[email protected]& ...

jqueryreactjsjquery-mobilenpmphonegap

Is there a way to set the same href link for the active class in the navbar using bootstrap-vue?

I am currently utilizing this navbar. It works fine when the href links are unique, but I encounter an issue when two pages share the same link - the active class is applied to both list items with that link in the manner I have written. Vue.component(& ...

cssvue.jsbootstrap-vue

Retrieve the source code of a webpage by accessing its URL with JavaScript through the use of JSONP

To extract the source code from a URL web page using JSONP, you can use the following code snippet: <script type="text/javascript"> var your_url = ''; $(document).ready(function(){ jQuery.ajax = (function(_ajax){ var protocol = location. ...

javascriptjqueryajaxdomjsonp

Sending an AJAX request to an external URL using PHP

I've been attempting to execute an ajax post request towards an external URL, and while the same request works fine in hurl.it, it doesn't seem to provide the expected output when I try it directly in the browser. When using hurl.it, I input the ...

phpjqueryajax

How come inactive links are still able to be clicked on?

I have been experimenting with various methods to disable links, but I seem to be unable to prevent them from being clickable. While I was successful in changing the cursor to 'not-allowed' when hovering over the disabled link, it still remains c ...

htmlcss

Display a div using Jquery when hovering over it with several classes

I want to create a hover effect where div2 fades in slowly when hovering over div1 within the same container. However, my jQuery code doesn't seem to be working as expected... $(".div").hover(function() { $(this).find(".div2").animate({ opac ...

javascriptjqueryhtmlcss

Utilizing jQuery to retrieve data from a JSON object with a nested array

After making an API call to Google Translate, the following data was returned: { "data": { "detections": [ [ { "language": "en", "isReliable": false, "confidence": 0.051902372 } ] ] } } In order to access the "language" ...

javascriptjqueryajaxjson

Confusing jQuery Selector Problem

Here is an example I have What this example should do: Check if there is a .box-wrapper in the document If there is, and if there is a click event on .tabs li a Locate .selected and remove the class Find the parent of the clicked link and add the class ...

jqueryjquery-selectors

Modify the initial letter of the user input as it is entered using JQuery

I've been experimenting with auto-capitalizing the first character that a user inputs in a textarea or input field. My initial approach was as follows: $(document).ready(function() { $('input').on('keydown', function() { if ( ...

javascriptjquerystringjquery-events

Expand the div to fit 100% width inside the Blueprint container

I am currently working on a website and considering using the Blueprint CSS framework. You can view the site I'm referencing here: http://jsfiddle.net/timkl/uaSe3/ The Blueprint framework allows for a nice 24 column grid layout. One challenge I&apos ...

cssblueprint-css

What sets apart jQuery's `click`, `bind`, `live`, `delegate`, `trigger`, and `on` functions, and how can they be utilized differently in coding

I have gone through the documentation for each function provided on the official jQuery website, but I couldn't find any comparison listings for the following functions: $().click(fn) $().bind('click',fn) $().live('click',fn) $().d ...

javascriptjquery

"Angular File Upload Made Easy with Drag-and-Drop Functionality and Cleverly Positioned

Encountering an issue with Angular File upload in conjunction with relatively positioned elements. The drop target is set to 100% width and height, absolutely positioned. While dragging a file over any non-relatively positioned element, the overlay functio ...

javascripthtmlcssangularjsangular-file-upload

Toggle the visibility of an element with a single button click

Below is a snippet of my sample code: SAMPLE HTML CODE: <ul> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <l ...

javascriptjqueryhtmlcss

Ensure that columns are neatly arranged horizontally when they do not all fit in one row

I currently have a row with 6 columns, but when they can't fit next to each other on the screen, 2 of them get pushed below, resulting in a messy layout. I could use a media query to solve this issue, however, I am curious if there is a better way to ...

htmlcsscss-gridbootstrap-5

Guide on setting up p-menubar in PrimeNG to expand in the opposite direction, from left to right, for the responsive

How can I modify the CSS styles or configure the p-menubar from PrimeNg to have it expand from right to left in the responsive version? Currently, when using the classes align-items-center flex justify-content-between, the menu remains stuck to the right e ...

cssangularprimeng

ajaxCRUD: Double inquires about adding data

I recently delved into using the ajaxCRUD library, which appears to be a straightforward yet powerful tool. Within my database, I have a table of users structured as follows: CREATE TABLE tbl_users ( usr_id INT NOT NULL AUTO_INCREMENT , usr_n ...

phpjquerymysqlajax

form for submitting multiple data via Ajax

I am working with two forms (request and feedback) where I need to use jQuery Ajax to send the data. When a user submits a request, the subject line will display "Request". If they submit feedback, the subject line will display "Feedback". Here is my cur ...

javascriptjqueryajax

SVG embedded directly into CSS is compatible with Chrome and Edge browsers, but unfortunately does not render correctly in Firefox

I'm having an issue with my code that displays icons. The GitHub icon isn't showing up on Firefox, but it works fine on Chrome and Edge. Surprisingly, the Google icon is working across all browsers! .github-icon { background-image: url("data ...

cssfirefoxsvg