moroshko / Autosuggest Trie
Licence: mit
Minimalistic trie implementation for autosuggest and autocomplete components
Stars: ✭ 22
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Autosuggest Trie
React Autosuggest
WAI-ARIA compliant React autosuggest component
Stars: ✭ 5,773 (+26140.91%)
Mutual labels: autocomplete, typeahead, autosuggest
Autosuggest Highlight
Utilities for highlighting text in autosuggest and autocomplete components
Stars: ✭ 176 (+700%)
Mutual labels: autocomplete, typeahead, autosuggest
React Input Enhancements
Set of enhancements for input control
Stars: ✭ 1,375 (+6150%)
Mutual labels: autocomplete, typeahead, autosuggest
react-abstract-autocomplete
Bring-Your-Own-UI autocomplete / mentions component for React.
Stars: ✭ 15 (-31.82%)
Mutual labels: autocomplete, typeahead, autosuggest
React Autowhatever
Accessible rendering layer for Autosuggest and Autocomplete components
Stars: ✭ 146 (+563.64%)
Mutual labels: autocomplete, typeahead, autosuggest
Vue Autosuggest
🔍 Vue autosuggest component.
Stars: ✭ 492 (+2136.36%)
Mutual labels: autocomplete, typeahead, autosuggest
vue-thailand-address
🇹🇭 Thai address input for Vue.
Stars: ✭ 44 (+100%)
Mutual labels: autocomplete, typeahead
ng-sq-ui
Flexible and easily customizable UI-kit for Angular 11+
Stars: ✭ 99 (+350%)
Mutual labels: autocomplete, typeahead
vue-single-select
single select dropdown with autocomplete
Stars: ✭ 43 (+95.45%)
Mutual labels: autocomplete, typeahead
Autocomplete
Accessible autocomplete component for vanilla JavaScript and Vue.
Stars: ✭ 277 (+1159.09%)
Mutual labels: autocomplete, typeahead
fast-autocomplete
Fast Autocomplete: When Elastcsearch suggestions are not fast and flexible enough
Stars: ✭ 201 (+813.64%)
Mutual labels: autocomplete, autosuggest
svelecte
Selectize-like component written in Svelte, also usable as custom-element 💪⚡
Stars: ✭ 121 (+450%)
Mutual labels: autocomplete, typeahead
Vue Simple Suggest
Feature-rich autocomplete component for Vue.js
Stars: ✭ 324 (+1372.73%)
Mutual labels: autocomplete, autosuggest
extensions
Angular Material Extensions Library.
Stars: ✭ 203 (+822.73%)
Mutual labels: autocomplete, typeahead
instatype
⚡️ Mobile-friendly React autocomplete component
Stars: ✭ 48 (+118.18%)
Mutual labels: autocomplete, typeahead
codemirror-autosuggest
CodeMirror autosuggest addon
Stars: ✭ 44 (+100%)
Mutual labels: autocomplete, autosuggest
Svelte Select
A select component for Svelte apps
Stars: ✭ 414 (+1781.82%)
Mutual labels: autocomplete, typeahead
Jquery Autocomplete
Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields
Stars: ✭ 3,461 (+15631.82%)
Mutual labels: autocomplete, autosuggest
Accessible Autocomplete
An autocomplete component, built to be accessible.
Stars: ✭ 474 (+2054.55%)
Mutual labels: autocomplete, typeahead
Autosuggest Trie
Minimalistic trie implementation for autosuggest and autocomplete components.
Installation
npm install autosuggest-trie --save
Basic Usage
import createTrie from 'autosuggest-trie';
const locations = [
{
id: 1,
name: 'East Richmond 1234 VIC',
population: 10000
},
{
id: 2,
name: 'East Eagle 1235 VIC',
population: 5000
},
{
id: 3,
name: 'Richmond West 5678 VIC',
population: 4000
},
{
id: 4,
name: 'Cheltenham 3192 Melbourne VIC',
population: 7000
},
{
id: 5,
name: 'Richmond 6776 VIC',
population: 3000
}
];
const trie = createTrie(locations, 'name');
console.log(trie.getMatches('richmond e'));
/*
[ { id: 1, name: 'East Richmond 1234 VIC', population: 10000 } ]
*/
console.log(trie.getMatches('ri', { limit: 2 }));
/*
[ { id: 3, name: 'Richmond West 5678 VIC', population: 4000 },
{ id: 5, name: 'Richmond 6776 VIC', population: 3000 } ]
*/
API
| Function | Description |
|---|---|
createTrie(items, textKey, options) |
Creates a trie containing the given items. |
getMatches(query, options) |
Returns items that match the given query. |
createTrie(items, textKey, options)
Creates a trie containing the given items.
| Parameter | Type | Required | Description |
|---|---|---|---|
items |
Array | ✓ | Array of items. Every item must be an object. |
textKey |
String | ✓ | Key that every item in items must have.item will be inserted to the trie based on item[textKey]. |
options |
Object | Additional options |
Possible options:
| Option | Type | Default | Description |
|---|---|---|---|
comparator |
Function | none | Items comparator, similar to Array#sort's compareFunction.It gets two items, and should return a number. Note: Matches in the first word (let's call it "group 1") are prioritized over matches in the second word ("group 2"), which are prioritized over matches in the third word ("group 3"), and so on. comparator will only sort the matches within each group.When comparator is not specified, items within each group will preserve their order in items. |
splitRegex |
RegExp | /\s+/ |
Used to split items' textKey into words. |
getMatches(query, options)
Returns items that match the given query.
| Parameter | Type | Required | Description |
|---|---|---|---|
query |
String | ✓ | Non-blank query string.If query is blank, [] is returned. |
options |
Object | Additional query options. |
Possible options:
| Option | Type | Default | Description |
|---|---|---|---|
limit |
Number | Infinity |
Integer >= 1 For example: getMatches('me', { limit: 3 }) will return no more than 3 items that match 'me'. |
splitRegex |
RegExp | /\s+/ |
Used to split the query into words. |
Running Tests
npm test
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].