Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/moroshko/autosuggest-highlight
Utilities for highlighting text in autosuggest and autocomplete components
https://github.com/moroshko/autosuggest-highlight
autocomplete autosuggest javascript typeahead
Last synced: 6 days ago
JSON representation
Utilities for highlighting text in autosuggest and autocomplete components
- Host: GitHub
- URL: https://github.com/moroshko/autosuggest-highlight
- Owner: moroshko
- License: mit
- Created: 2015-05-06T04:23:10.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-03-15T02:45:26.000Z (almost 2 years ago)
- Last Synced: 2024-12-21T09:04:24.433Z (13 days ago)
- Topics: autocomplete, autosuggest, javascript, typeahead
- Language: JavaScript
- Homepage:
- Size: 1.26 MB
- Stars: 304
- Watchers: 7
- Forks: 36
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://codeship.com/projects/78168)
[](https://github.com/moroshko/autosuggest-highlight/graphs/contributors)
[](https://codecov.io/gh/moroshko/autosuggest-highlight)
[](https://npmjs.org/package/autosuggest-highlight)
[](https://npmjs.org/package/autosuggest-highlight)
# Autosuggest Highlight
Utilities for highlighting text in autosuggest and autocomplete components.
## Installation
```shell
yarn add autosuggest-highlight
```
or
```shell
npm install autosuggest-highlight --save
```
## API
| Function | Description |
| :--- | :--- |
| [`match(text, query, options)`](#match) | Calculates the characters to highlight in `text` based on `query`. |
| [`parse(text, matches)`](#parse) | Breaks the given `text` to parts based on `matches`. |
### match(text, query, options)
Calculates the characters to highlight in `text` based on `query`.
It returns an array of pairs. Every pair `[a, b]` means that `text.slice(a, b)` should be highlighted.
Options are passed as JSON.
| Option | Description |
| :--- | :--- |
| insideWords | `boolean` false by default. Searches inside words |
| findAllOccurrences | `boolean` false by default. Finds all occurrences of each match |
| requireMatchAll | `boolean` false by default. Requires each word of `query` to be found in `text` or else returns an empty set |
#### Examples
We match at the beginning of a word by default:
```js
var match = require('autosuggest-highlight/match');
// text indices: 012345678
// highlighting: vv
var matches = match('some text', 'te'); // [[5, 7]]
```
```js
// text indices: 012345678
// highlighting:
var matches = match('some text', 'e'); // []
```
Enable search inside words:
```js
var match = require('autosuggest-highlight/match');
// text indices: 012345678
// highlighting: v
var matches = match('some text', 'm', { insideWords: true }); // [[2, 3]]
```
When `query` is a single word, only the first match is returned by default:
```js
// text indices: 012345678901234
// highlighting: v
var matches = match('some sweet text', 's'); // [[0, 1]]
```
You'll get the second match, if `query` contains multiple words:
```js
// text indices: 012345678901234
// highlighting: v v
var matches = match('some sweet text', 's s'); // [[0, 1], [5, 6]]
```
Or using the findAllOccurrences option:
```js
// text indices: 012345678901234
// highlighting: v v
var matches = match('some sweet text', 's', { findAllOccurrences: true }); // [[0, 1], [5, 6]]
```
Matches are case insensitive:
```js
// text indices: 012345678
// highlighting: v
var matches = match('Some Text', 't'); // [[5, 6]]
```
and [diacritics](https://en.wikipedia.org/wiki/Diacritic) are removed:
```js
// text indices: 0123456
// highlighting: vvvv
var matches = match('Déjà vu', 'deja'); // [[0, 4]]
```
When `query` has multiple words, the order doesn't matter:
```js
// text indices: 012345678901234
// highlighting: v v
var matches = match('Albert Einstein', 'a e'); // [[0, 1], [7, 8]]
```
```js
// text indices: 012345678901234
// highlighting: v v
var matches = match('Albert Einstein', 'e a'); // [[0, 1], [7, 8]]
```
### parse(text, matches)
Breaks the given `text` to parts based on `matches`.
It returns an array of `text` parts by specifying whether each part should be highlighted or not.
For example:
```js
var parse = require('autosuggest-highlight/parse');
// text indices: 0123456789012345
// highlighting: vv v
var parts = parse('Pretty cool text', [[7, 9], [12, 13]]);
/*
[
{
text: 'Pretty ',
highlight: false
},
{
text: 'co',
highlight: true
},
{
text: 'ol ',
highlight: false
},
{
text: 't',
highlight: true
},
{
text: 'ext',
highlight: false
}
]
*/
```
## Usage with old browsers
For using this library with old browsers such as IE11 you must change import to
```js
var match = require('autosuggest-highlight/ie11/match');
var parse = require('autosuggest-highlight/ie11/parse');
```
## License
[MIT](http://moroshko.mit-license.org)