Full text search across a website, a standards-based DOM Component
npm install rwt-search

##### Premium DOM Component
by Read Write Tools | Abstract |
|---|
| The rwt-search DOM component is the standard user interface for the Site Search feature of the RWSERVE HTTP/2 server. This search dialog box has look-ahead word autofill to guide users in their search for locally hosted documents. |
The SEMWORDS and SITEWORDS tools (see Site Search
) produce an index of all the words used in a given website. That index is used
by this DOM component to provide full text searching on a local basis, without
relying on AJAX or direct server interaction.
This DOM component handles the initial fetch of the site index, caching it to
the user's local-storage for ready use across all of the website's documents.
Internally, the DOM component uses a ternary search trie to provide partial word
lookups as the user types, guiding the user towards better results.
#### In the wild
To see an example of this component in use, visit the READ WRITE STACK
website and press F7 "Search". To understand what's going on under the
hood, use the browser's inspector to view the HTML source code and network
activity, and follow along as you read this documentation.
#### Prerequisites
The rwt-search DOM component works in any browser that
supports modern W3C standards. Templates are written using BLUE
PHRASE notation, which can be compiled into HTML using the free Read Write View
desktop app. It has no other prerequisites. Distribution and installation are
done with either NPM or via Github.
#### Download
OPTION 1: Familiar with Node.js and the OPTION 2: No prior experience using NPM? Important note: This DOM component uses Node.js and NPM and
Download using NPM
package.json file?
Great. Install the component with this command:
npm install rwt-search
Just follow these general steps:
package.json file in the root of your web project using the command:
npm init
npm install rwt-search
package.json as a convenient distribution and installation mechanism. The DOM component itself does not need them.
If you prefer using Github directly, simply follow these steps:
Download using Github
node_modules directory in the root of your web project.
git clone https://github.com/readwritetools/rwt-search.git
After installation, you need to add four things to your HTML page to make use of
it.
* Add a script tag to load the component's rwt-search.js file:
``html`
* Add the component tag somewhere on the page.
* For scripting purposes, apply an id attribute.sourceref
* Apply a attribute with a reference to the full-text word index filerole=search
created by the SITEWORDS utility.
* Optionally, apply a shortcut attribute with something like F2, F4, etc. for
hotkey access.
* And for WAI-ARIA accessibility apply a attribute.`html`
* Add a button for the visitor to click to show the dialog:
`html
š
`
* Add a listener to respond to the click event:
`html`
#### Dialog size and position
The dialog is absolutely positioned towards the bottom right of the viewport.
Its position and size may be overridden using CSS by defining new values for the
variables:
`css`
rwt-search {
--width: 70vw;
--height: 75vh;
--bottom: 1rem;
--right: 1rem;
}
#### Dialog color scheme
The default color palette for the dialog uses a dark mode theme. You can use CSS
to override the variables' defaults:
`css`
rwt-search {
--color: var(--white);
--accent-color1: var(--pure-white);
--accent-color2: var(--yellow);
--accent-color3: var(--js-blue);
--background: var(--black);
--accent-background1: var(--medium-black);
--accent-background2: var(--pure-black);
--accent-background3: var(--nav-black);
--accent-background4: var(--black);
}
The browser's local-storage area is used to cache the sitewords file and the
user's most recent search terms. These keys are set by the DOM component:
| sitewords-data | The contents of the SITEWORDS index fetched from the server. |
| sitewords-expires | An expiration date checked before considering whether or not to refetch the SITEWORDS index. This is obtained from the server's cache-control response header. |
| sitewords-etag | The etag response header captured in the most recent SITEWORDS fetch. This is used to send a conditional request to the server when the SITEWORDS index has passed its expiration date. |
| rwsearch-request | The most recent search terms used by the visitor. |
The component issues life-cycle events.
component-loadedwaitOnLoading() method which returns a promise that resolves when the component-loaded event is received. Call this asynchronously with await.---
| Documentation | READ WRITE HUB | |
| Source code | github | |
| Component catalog | DOM COMPONENTS | |
| Package installation | npm | |
| Publication venue | READ WRITE STACK |
The rwt-search DOM component is not freeware. After
evaluating it and before using it in a public-facing website, eBook, mobile app,
or desktop application, you must obtain a license from Read Write Tools
.

Site Search Software License Agreement
#### Activation
To activate your license, copy the rwt-registration-keys.js file to the *rootcustomer-number
directory of your website*, providing the and access-key sent toexample.com` with your website's hostname.
your email address, and replacing
Follow this example:
export default [{
"product-key": "rwt-search",
"registration": "example.com",
"customer-number": "CN-xxx-yyyyy",
"access-key": "AK-xxx-yyyyy"
}]