moroshko / Autosuggest Highlight
Programming Languages
Projects that are alternatives of or similar to Autosuggest Highlight
Autosuggest Highlight
Utilities for highlighting text in autosuggest and autocomplete components.
Project status
Looking for maintainers!
Unfortunately, I don't have the time to maintain this project anymore. If you are interested to help, please reach out to me on Twitter @moroshko.
Installation
yarn add autosuggest-highlight
or
npm install autosuggest-highlight --save
API
Function | Description |
---|---|
match(text, query) |
Calculates the characters to highlight in text based on query . |
parse(text, matches) |
Breaks the given text to parts based on matches . |
match(text, query)
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.
Examples
We match only at the beginning of a word:
var match = require('autosuggest-highlight/match');
// text indices: 012345678
// highlighting: vv
var matches = match('some text', 'te'); // [[5, 7]]
// text indices: 012345678
// highlighting:
var matches = match('some text', 'e'); // []
When query
is a single word, only the first match is returned:
// 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:
// text indices: 012345678901234
// highlighting: v v
var matches = match('some sweet text', 's s'); // [[0, 1], [5, 6]]
Matches are case insensitive:
// text indices: 012345678
// highlighting: v
var matches = match('Some Text', 't'); // [[5, 6]]
and diacritics are removed:
// text indices: 0123456
// highlighting: vvvv
var matches = match('Déjà vu', 'deja'); // [[0, 4]]
When query
has multiple words, the order doesn't matter:
// text indices: 012345678901234
// highlighting: v v
var matches = match('Albert Einstein', 'a e'); // [[0, 1], [7, 8]]
// 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:
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
}
]
*/