Utilities for highlighting text in autosuggest and autocomplete components
npm install autosuggest-highlight
Utilities for highlighting text in autosuggest and autocomplete components.
``shell`
yarn add autosuggest-highlight
or
`shell`
npm install autosuggest-highlight --save
| Function | Description |
| :--- | :--- |
| match(text, query, options) | Calculates the characters to highlight in text based on query. |parse(text, matches)
| | Breaks the given text to parts based on matches. |
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 |boolean
| findAllOccurrences | false by default. Finds all occurrences of each match |boolean
| requireMatchAll | 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 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]]
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
}
]
*/
`
js
var match = require('autosuggest-highlight/ie11/match');
var parse = require('autosuggest-highlight/ie11/parse');
``