Skip to content

Use autocomplete-it to implement intelligent autocomplete functionality in your app. Queries can match parts of the beginnings of sequential words, and matches can optionally be wrapped for client-side highlighting.

dlras2/autocomplete-it

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

autocomplete-it

npm npm bundle size (minified + gzip)

Use autocomplete-it to implement intelligent autocomplete functionality in your app. Queries can match parts of the beginnings of sequential words, and matches can optionally be wrapped for client-side highlighting.

Usage

API

constructor(inputs[, options])

  • inputs <Array>
  • options <Object>
    • defaultLimit <integer> Default: 10
    • maximumLimit <integer> Default: 100
const AI = require('autocomplete-it');
const values = [
  'blood orange',
  'boysenberry',
  'goji berry',
  'gooseberry',
  'orange'
];
const ai = new AI(values);

lookup(query[, options])

  • query <string>
  • options <Object>
    • limit <integer> | <undefined>
    • highlight <string> | <Array>

Simply look up values that match the given query.

ai.lookup('go');
// [ 'goji berry',
//   'gooseberry' ]

Highlight the matched query pieces.

ai.lookup('go', { highlight: '[]' });
// [ { display: '[go]ji berry', value: 'goji berry' },
//   { display: '[go]oseberry', value: 'gooseberry' } ]

Queries that match the beginning of the value return before other matches.

ai.lookup('or', { highlight: '[]' });
// [ { display: '[or]ange', value: 'orange' },
//   { display: 'blood [or]ange', value: 'blood orange' } ]

If not enough results match the query as a whole, split matches are returned.

ai.lookup('bo', { highlight: '[]' });
// [ { display: '[bo]ysenberry', value: 'boysenberry' },
//   { display: '[b]lood [o]range', value: 'blood orange' } ]

Split queries force a wordbreak before matching values further.

ai.lookup('b o', { highlight: '[]' });
// [ { display: '[b]lood [o]range', value: 'blood orange' } ]

About

Use autocomplete-it to implement intelligent autocomplete functionality in your app. Queries can match parts of the beginnings of sequential words, and matches can optionally be wrapped for client-side highlighting.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published