webdevpuneet.com

Related Snippets

85 in Tables category
46–51 of 60

Live Search with Highlighted Matches

Grouped Column Headers Table

Sticky Summary/Totals Row

Conditional Formatting Table

Drag to Reorder Table Columns

Multi-Column Sort Table

Live Search Table with Highlighted Matches — Real Substring Highlighting (JS)

Live Search with Highlighted Matches · Tables · Plain HTML, CSS & JS · Live preview

CategoryTables
TagsSVGDark ModeData Tables

Copy & paste

Source Code

<div class="tsh-wrap">
  <div class="tsh-bar">
    <svg class="tsh-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
    <input type="text" id="tshInput" class="tsh-input" placeholder="Search across all columns…">
    <span class="tsh-count" id="tshCount"></span>
  </div>
  <table class="tsh-table">
    <thead><tr><th>Ticket</th><th>Subject</th><th>Requester</th><th>Assignee</th></tr></thead>
    <tbody id="tshBody"></tbody>
  </table>
  <p class="tsh-empty" id="tshEmpty" hidden>No rows contain "<span id="tshQ"></span>".</p>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Real substring position search
indexOf-based matching finds exact character offsets, not a whole-cell tint.
Every occurrence highlighted
A loop finds all non-overlapping matches per cell, not just the first.
Escape-then-wrap safety
Cell text is HTML-escaped before the matched slice is wrapped in mark.
Multi-column search
One input searches across every column at once, case-insensitively.
Shared query for filter and highlight
Filtering and highlighting always agree, since both read the same query.
Live result count
An "N of M" counter updates on every keystroke.
Query-aware empty state
The empty message echoes back the exact search term that matched nothing.
Data-driven & no library
Renders from a ROWS array with generic column logic — zero dependencies.

About this UI Snippet

Live Search Table with Highlighted Matches — Real Substring-Position Highlighting

Screenshot of the Live Search with Highlighted Matches snippet rendered live

A search box that filters a table is useful; one that also shows *exactly where* the match occurred inside each cell is far more useful, because the user doesn't have to re-scan the row to figure out why it matched. This snippet builds real substring-position highlighting in plain HTML, CSS, and vanilla JavaScript — it finds every occurrence of the query inside each cell's text and wraps only that slice in <mark>, rather than tinting the whole cell or row.

Finding every occurrence, not just the first

highlightAll() walks each cell's text with indexOf in a loop, advancing the search position past each match so it finds *every* non-overlapping occurrence of the query — not just the first. A naive implementation that only highlights the first hit misses repeated terms within the same cell (e.g. "Safari" appearing twice), which looks like a bug the moment a user searches for a common word.

Escape-then-wrap, never innerHTML on raw text

Because the result is injected via innerHTML, every plain-text segment is passed through esc() before being placed in the output string, and only the matched slice is wrapped in <mark>. This escape-then-wrap order means a ticket subject containing < or & renders as literal text instead of being interpreted as markup — the query itself never needs escaping since it's compared against lowercase text and only used to slice the *original* (already-safe-to-escape) string.

Filtering AND highlighting from the same query

A single input drives both behaviors: rows are kept only if *any* column contains the query (case-insensitive), and every kept row's cells run through the same highlighting function. Because filtering and highlighting share one raw/q pair, there's no risk of the visible highlight drifting from what actually caused the row to match.

Real position math, not a CSS trick

The highlighting genuinely locates character offsets with indexOf and slices the string at those offsets — it isn't a background-color applied to a whole <td> or a CSS :contains-style hack (which doesn't exist and couldn't underline a substring anyway). This is the same technique behind real search-result snippets in tools like a code search UI or a command palette.

Count, empty state, and multi-column search

A live "N of M" count and a friendly empty state (echoing back the exact query that matched nothing) round out the interaction. The search runs across every column — ticket number, subject, requester, and assignee — so one input replaces four separate filters. Pair it with a filterable-table when you need independent per-column filters instead of one combined search, or a sortable-table to let users reorder the highlighted results.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA ticket table renders with a search box above it.
  2. 2
    Type a queryRows filter live to only those containing the text in any column.
  3. 3
    Watch the highlightEvery matching substring inside each visible cell is wrapped in a highlighted mark.
  4. 4
    Search a repeated wordType a term that appears twice in one cell (e.g. "Safari") — both occurrences highlight.
  5. 5
    Clear the inputThe table returns to unfiltered, unhighlighted rows.
  6. 6
    Swap in your dataReplace the ROWS array with your own columns; the search and highlight logic is generic.

Real-world uses

Common Use Cases

Support ticket queues
Search subjects, requesters and assignees at once, highlighting every matching substring inline instead of shading the whole cell.
Admin and log tables
Locate one event across many columns, with all non-overlapping matches per cell found through a loop of indexOf calls.
Directories and CRMs
Find contacts by any visible field, pairing with a selectable table for acting on the results afterwards.
Command-palette pickers
Reuse the highlight technique in pickers and menus, escaping cell text as HTML before wrapping the matched slice in a mark.
Safe highlight rendering
Learn escape-then-wrap rendering as a reference, and compare with a simpler filterable table that filters without highlighting.

Got questions?

Frequently Asked Questions

This snippet computes the exact character offset of the query inside each cell's text using indexOf, then slices the string at that offset so only the matching substring is wrapped in a mark element. A whole-cell background tells you the row matched somewhere; this shows exactly which characters matched, which is far more useful when scanning longer text.

Yes. highlightAll() runs indexOf in a loop, advancing the search position past each match it finds, so if a term like "Safari" appears twice in one subject line, both occurrences get wrapped — not just the first. This matters because real user data frequently repeats the searched term.

Yes. Every non-matching text segment is HTML-escaped before being placed in the output string, and only the matched slice is wrapped in <mark> afterward. Because escaping happens first, cell data containing < or & can never be interpreted as markup, even though the result is injected via innerHTML.

Yes — rowMatches() checks whether any column in a row contains the query (case-insensitive substring match), so one search box replaces needing a separate filter per field. If you need independent per-column filters instead, see the filterable table snippet.

Keep the query in component state, derive the filtered rows with a filter/some check, and render each cell by splitting its text around the query's indexOf position into escaped-and-mark-wrapped React elements (or use v-html/[innerHTML] bindings with the same escape-then-wrap string logic in Vue/Angular). The matching and highlight algorithm is framework-agnostic.