Using JQuery to emphasize text is a simple and effective way to draw attention

Let's imagine a scenario where we have the following HTML code:

<div class="person">
Mike Mulky
</div>

<div class="person">
Jenny Sun
</div>

<div class="person">
Jack Kickle
</div>

By leveraging JQuery, it becomes possible to filter out matching queries. This can be particularly useful when a user is interacting with a textbox.

$('#userInputTextbox').keypress(function(){
    $('div.person').hide().filter(':contains("'+THE_QUERY+'")').show();
});

This functionality works effectively in filtering the content. However, an interesting question arises: How can we highlight specific words that are part of both the query and the displayed text within the DIVs?

javascriptjquerycss

Answer №1

If you're looking to enhance your website with dynamic text highlighting, consider incorporating the jQuery highlight plugin. I've been using it for a current project involving AJAX search results, and it's proven to be effective and lightweight.

Simply utilize .highlight(THE_QUERY) within your code.

$('#userInputTextbox').keypress(function(){
    $('div.person').hide().removeHighlight()
      .filter(':contains("'+THE_QUERY+'")').highlight(THE_QUERY).show();
});

The concept behind this plugin is straightforward: identify the text, encapsulate it in a 

<span class="highlight"></span>
, and then customize the appearance of .highlight to your liking. And don't forget about .removeHighlight() to clean up afterwards.

Answer №2

If you're in need of a gentle jQuery highlight plugin, check out this resource:

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

How to insert a row above the header in an Excel sheet using JavaScript within

i am using excel js to export json data to excel. The json data is successfully exported to the sheet, but now I need to add a row that provides details of the sheet above the header text. for more details please refer image the code is shown below: i ...

javascriptangularexcelxlsxexceljs

Combine various routes within CanvasRenderingContext2D to simultaneously apply fill and stroke operations

I've been experimenting with drawing a series of intersecting shapes using paths in CanvasRenderingContext2D. While it's going smoothly, I'm now looking to merge all these paths so that when I fill them with a semi-transparent color, the ove ...

javascripttypescripthtml5-canvas

Create a single JSON object by searching through two collections in MongoDB

Is it possible for you to assist me in combining data from two collections into one JSON format? Users [ user_id, user_name, city_id ] [ { "name": "Anton", "user_id": 1, "city_id": 1 }, { "name": "Vasiliy", ...

javascriptjsonnode.jsmongodb

I'm facing an issue with SSRProvider in my NextJs application

My application is developed using NextJs and Typescript, utilizing the react-bootstrap library for creating components. I am facing an issue where I keep receiving an error message stating that When server rendering, you must wrap your application in an &l ...

javascriptreactjstypescriptnext.js

Glistening tabPanel and Analytics by Google

I recently completed a comprehensive tutorial here that delves into the intricacies of Google Analytics. Despite grasping the concepts explained in the tutorial, my understanding of jQuery remains at ground zero. In my ShinyApp, I utilize multiple tabPanel ...

javascriptjqueryrgoogle-analyticsshiny

Detecting collisions between two squares in an HTML5 canvas

class Snake { constructor() { this.x = 400; this.y = 400; this.width = 25; this.height = 25; } draw() { ctx.fillRect(this.x, this.y, this.width, this.height); } } let snake = new Snake(); class ...

javascripthtml5-canvas

How can I extract only certain keys from a large JavaScript object while keeping the code concise?

Simply put, I aim to streamline objects by discarding unnecessary keys. Imagine a scenario where a third party API sends back JSON data with numerous attributes that hold no importance to you. obj = { name: ..., id: ..., description: ..., blah: .. ...

javascriptjsonjavascript-objects

How can I incorporate a new user interface button into Here Maps?

I have set up a default interactive map using Nokia Here Maps v3. The map contains multiple markers grouped together. Now, I am looking to add a button or some other UI element to the map that, when clicked, will call a function to zoom in as tightly as p ...

javascriptvue.jshere-api

In JavaScript, filter out and return only the parent objects that have a specific property

Let's consider the structure of an object as shown below: var Obj = { a: { name: 'X', age: 'Y', other: { job: 'P', ...

javascriptjqueryjavascript-objects

Tips for linking a dictionary to an Angular <p> tag in HTML

Although I have little experience with angularJS, I am struggling to find a clear explanation on how to bind a dictionary with an html tag so that any changes made in the dictionary reflect in the number displayed within the <p> tag. For instance, if ...

javascriptangularjs

Issues with Linear-Gradient functionality in NativeScript 8 on Android devices

I recently added a linear-gradient to an image in my NativeScript 8 app. Surprisingly, it seems to work perfectly on iOS, but I'm encountering some issues on Android. Despite trying solutions like using -webkit-linear-gradient(), the desired effect is ...

androidcssangularnativescript

What is the method for utilizing a filter to extract the specific value from the elements within an array of double objects?

I am facing an issue with my code where I have an array called pick containing objects and another object named diaryItem. My goal is to extract only the object with the name 'wormColor' from the diaryItem object. Unfortunately, when I tried run ...

javascriptnode.jsreactjsreact-native

Unique CSS design with an accentuated border

I was experimenting with creating a corner using CSS and managed to achieve something like this: .left-corner { width: 0; height: 0; border-top: 100px solid powderblue; border-left: 100px solid transparent; } <div class="left-corner"></ ...

htmlcsscss-shapes

How can you implement CSS styling for Next.js HTML during server-side rendering?

Explore Next.js and observe the page request in the network tab. The preview displays not only the HTML but a fully pre-styled page as well. https://i.stack.imgur.com/deJLY.png When working with Styled-Components and Material-UI, they offer the ServerSty ...

htmlcssnext.jsserver-side-renderingcritical-css

Navigate to a New Page post Dropdown Selection

Currently working on developing a website using Github Pages where I need users to be directed to a specific page after choosing the final option. I am extracting data from a JSON file. I attempted to include an anchor tag in the JSON but it does not red ...

javascriptjsonhttp-redirectgithub-pages

"Dynamic background image shifts with the movement of the mouse cursor

Is there a way to achieve an effect like this interactive background: I am looking to make the background image follow the mouse cursor. Is there a simple method to accomplish this without directly using the script from the example? I have attempted a so ...

jquerycss

Prevent unchecking a checked list item by clicking on it

Is it possible to prevent the user from unchecking a list item once it has been checked? Your assistance is greatly appreciated! $(".collectioncontainer ul li").click(function(){ $('.collectioncontainer ul li.checked').not(this).removeClass( ...

javascriptjquery

Filtering concatenated values from scope in ng-table

I have developed an AngularJs application using ngTable to display user data. As per the requirements, I need to filter by a concatenated string of first and last name in a single column. Despite attempting to create a custom filter following the guideline ...

javascriptangularjsangularjs-directiveangularjs-ng-repeatngtable

Troubleshooting localhost connection issue with jquery.exif.js

Hey there! I'm currently trying to implement a new plugin on my ASP.NET website, specifically this one: When testing the plugin on my local IIS or using the ASP.NET development server, I encountered an issue. Each time the plugin tries to execute f ...

jqueryasp.netexifbad-request

Mechanism for creating variables in Angular through factory services

While delving into the world of angular1, I encountered services and factories. Using the .factory() method, I passed in a string that represented the desired service name. Surprisingly, I found myself able to reference a variable matching this string wi ...

javascriptangularjsvariablesservicefactory