Skip to main content
100%

On-Page Text Search

✓ Published0🌍 Public
Aamundo
Last edited Sep 20, 2010
Created on Apr 6, 2011

Typing a query into the text input triggers a live on-page search that highlights every matching term within the Wikipedia-derived paragraphs. As the user types, the keyup event handler calls jQuery’s `highlight` method, which walks the DOM text nodes and wraps matches in styled `<span>` elements. Removing the query invokes `removeHighlight`, which unwraps those spans and normalizes the text nodes. The code uses jQuery event binding and custom DOM traversal to apply the search visually.

AI-generated description

Similar vizzes

Loading thumbnail…

wiki preview test

This example demonstrates an interactive Wikipedia link preview in a plain HTML page, where hovering over a linked article title displays its summary in a pop-up. The code uses the Wikipedia REST API to fetch article extracts on mouseover, then dynamically creates and positions a div element via the DOM API. The pop-up is removed on mouseout. While it loads D3 v7 from a CDN, the interaction relies on native JavaScript event listeners and fetch calls, not on D3-specific visualization functions.

Cchristiand416@gmail.com
56% match
Loading thumbnail…

Gist 7f5cc15d0eae9281c33b735420ae8ee0

This example transforms a PmWiki source page into a searchable interface for code snippets. It fetches the page’s source via the `fetch` API, splits it into lines, and tokenizes text wrapped in `@@` delimiters. Each snippet becomes a clickable link that queries GitHub’s gist search for matches by the user “Utopiah”. The script uses `document.querySelectorAll` to locate existing `<code>` elements in the page and replaces their content with the generated anchor tags, while logging any unmatched snippets. It relies on vanilla DOM manipulation and URL construction, with no external visualization libraries.

UUtopiah
55% match
Loading thumbnail…

Remove Kibana Auto Complete Bar

This example removes the autocomplete bar from a Kibana search interface. It runs as a userscript that attaches a click event listener to the page. On each click, the script uses jQuery to select the search input, then unbinds the `change`, `focus`, and `keydown` events to disable the autocomplete behavior. The code executes by injecting a function into the page context via a `script` element, and it relies on `document.addEventListener` and `window.jQuery` to target the input field.

WWilliamQLiu
53% match
Loading thumbnail…

textbox-outline

Typing into a text input updates an overlay of outlined boxes and arrows that segment the text into individual words, showing the word boundaries and their spacing. The visualization uses a hidden SVG layer synchronized with the input element’s rendered text, calculating character width from a monospace font. It is built with D3 selections and event handlers, rendering rectangles and text elements in SVG while reading the current input value on each keystroke.

11wheel
52% match
Loading thumbnail…

HTML Link

This example demonstrates a minimal HTML page that displays the text "Hello" followed by a hyperlink to a Wikipedia article about Carl Friedrich Gauss. The page uses vanilla HTML and CSS, with the body styled for centered, large text at 13em. A small JavaScript snippet logs a message to the browser's developer console, showing basic script integration within an HTML document. The visualization serves as a bare-bones starting point for web development, illustrating how static content and client-side scripting coexist in a single file.

CCurran Kelleher
52% match
Loading thumbnail…

Requesting data from the Github API

This example demonstrates a simple user-driven data request to the Wikipedia API. It shows how a text input and submit button trigger a `fetch` call to the opensearch endpoint, retrieving and displaying search results based on the submitted subject. The code uses the browser’s built-in `fetch` API to request JSON data, then logs the response and result titles to the console via chained `.then()` promises. The interface includes a loader placeholder and a result article, though the visible rendering of the results is minimal, focusing on the request-response flow.

LLaurens
52% match
Loading thumbnail…

Gist ec916d1fc2f8a4ed9fb9

This example demonstrates a minimal URL-based interaction pattern for a web page. It shows how a query string parameter, such as `?targetDiv`, is parsed with jQuery and used to reveal a specific hidden element on the page. The code uses `$(location).attr('search')` to retrieve the raw query string, strips the leading question mark with `substring(1)`, and then calls a `doStuff()` function that targets the named div via `$("#" + targetDiv).show()`. No data visualization or charting library is involved; the focus is purely on client-side DOM manipulation driven by the page’s URL.

LLayne Smith
51% match
Loading thumbnail…

Ultra Fast Type-ahead

This visualization demonstrates an ultra-fast type-ahead search interface for country names. The code loads a JSON dataset of countries, maps it to an array of names, and uses jQuery’s `$('#search').typeahead` API with a custom substring matcher that employs a regular expression (`^${q}`) to filter results from the first letter. The interface highlights matching text, providing immediate feedback as the user types.

YYuliya
51% match