https://github.com/knadh/highlighted-input.js
Super tiny, zero dep Javascript lib that highlights specific keywords and tags in an <input> field.
https://github.com/knadh/highlighted-input.js
Last synced: 12 months ago
JSON representation
Super tiny, zero dep Javascript lib that highlights specific keywords and tags in an <input> field.
- Host: GitHub
- URL: https://github.com/knadh/highlighted-input.js
- Owner: knadh
- License: mit
- Created: 2025-03-06T08:37:31.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-26T15:45:08.000Z (about 1 year ago)
- Last Synced: 2025-06-05T23:08:04.655Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://knadh.github.io/highlighted-input.js
- Size: 11.7 KB
- Stars: 27
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# highlighted-input.js
highlighted-input.js is a super tiny, zero dependency Javascript lib that highlights specific keywords and tags in an <input> field. It is ideal for search inputs to highlight field selectors as the user types. It is ~450 bytes minified+gzipped.
[**View demo**](https://knadh.github.io/highlighted-input.js)
[](https://knadh.github.io/highlighted-input.js)
## Usage
### Node
```shell
npm install @knadh/highlighted-input
```
```javascript
import { highlightedInput } from @knadh/highlighted-input;
// Initialize the highlighter with the input element and keyword map
const input = document.getElementById("input");
// .highlighted-h1 and .highlighted-h2 highlight classes.
const h1 = "highlighted-h1";
const h2 = "highlighted-h2";
// Map of keywords to highlight and the corresponding classnames.
// Copy styles from style.css and add it to the webpage.
const keywordMap = {
"lang:": h1,
"repo:": h1,
"user:": h1,
"AND": h2,
"OR": h2,
"NOT": h2,
};
highlightedInput(input, keywordMap);
```
Copy the [CSS](https://github.com/knadh/highlighted-input.js/blob/master/style.css), customize it as required, and add it to the webpage.
Check the [demo source](https://github.com/knadh/highlighted-input.js/blob/master/docs/index.html) for a full example.
### ES6 module
Check the [demo source](https://github.com/knadh/highlighted-input.js/blob/master/docs/index.html) to use the lib in `` directly in an HTML page.
Licensed under the MIT License.