Releases · digitalfortress-tech/typeahead-standalone

Breaking changes

This version introduces a few breaking changes as listed below -

config option identifier and dataTokens is replaced by the keys config option

Earlier, when your input data was an array of objects, you had to provide an identifier config option that represented the property name of each object whose value should be added to the search index. This value was also displayed as the suggestions value by default. The config option dataTokens was used when you wanted to add more properties of the said source objects to the search index.

Now all this can be done by simply providing the keys config option which accepts an array of property names. The first value of this config option is required when the input data is an array of objects and by default this first property of the keys array is the one that is used to display the suggestions.

const localData = [
    {title: 'Man of Steel', year: '2013', cast: { actor: { name: 'Henry Cavill' }}},
    {title: 'Iron Man', year: '2008', cast: { actor: { name: 'Robert Downey Jr' }}},
    //...
];

// old way
typeahead({
     // ...
     source: {
         local: localData,
         identifier: 'title',
         dataTokens: ['year'],
    }
});


// new way
typeahead({
     // ...
     source: {
         local: localData,
         keys: ['title', 'year'],
        /* You can also use dot notation to access nested objects */
        //  keys: ['title', 'year', 'cast.actor.name'],
    }
});

The groupIdentifier config option has been renamed to groupKey config option

Simply replacing groupIdentifier by groupKey should work.
Here's an example -

const localData = [
    { id: 1, color: "Yellow", meta: { colorCode: "YW" }},
    { id: 2, color: "Green", meta: { colorCode: "GN"}, shade: "Greenish" },
    { id: 3, color: "Olive", meta: { colorCode: "OV"}, shade: "Greenish" },
    //...
];

// old way
typeahead({
     // ...
     source: {
         local: localData,
         groupIdentifier: 'shade',
    }
});


// new way
typeahead({
     // ...
     source: {
         local: localData,
          groupKey: 'shade',  /* You can also use dot notation to access nested objects */
    }
});

Displaying custom html or default suggestions via the templates.empty config option has changed

The empty template, like all other templates is a callback receiving the resultSet as a parameter.
Earlier, to set default suggestions, we would directly update the defaultItems within the resultSet to set the default suggestions. And we would return an HTML string in case we wanted to display some HTML content.

With this current release, we no longer need to touch the resultSet parameter.
If you wish to display some HTML content, you simply return a string containing the required HTML and
If you wish to display default suggestions, you simply return an array of suggestions from this template which will then be shown as the default suggestions.

Here is a brief example -

/**** before ****/
typeahead({
     // ...
     templates: {
         empty: (resultSet) => {
             resultSet.defaultItems = ['red', 'blue']; /* to display default suggestions  */
             // return "<h4>Search for available Colors</h4>" /* to display some HTML */
         }
    }
});


/**** after ****/
typeahead({
     // ...
     templates: {
         empty: (resultSet) => {
             return ['red', 'blue']; /* to display default suggestions  */
             // return "<h4>Search for available Colors</h4>" /* to display some HTML */
         }
    }
});

Changes in the resultSet

2 properties within the resultSet have been renamed.

resultSet.container has become resultSet.wrapper
resultSet.items has become resultSet.hits

/**** before ****/
resultSet.container // returns the container DOM element
resultSet.items     // returns the found suggestions

/**** after ****/
resultSet.wrapper   // returns the container DOM element
resultSet.hits      // returns the found suggestions

Moved the global classname config option to classNames.wrapper config option

The global classname option have been moved to the classNames.wrapper. Its default value is "typeahead-standalone" which is used as a selector to apply the default styles. If you want to use the default styles and also wish to update the wrapper class name, be sure to include the aforementioned class as well. (i.e. classNames.wrapper = "typeahead-standalone my-custom-class" )

/**** before ****/
typeahead({
     // ...
     classname: 'my-custom-class'
});

/**** after ****/
typeahead({
     // ...
     classNames: {
         wrapper: 'my-custom-class' /* if using default styles, use "typeahead-standalone my-custom-class" */
    }
});

config.debounceRemote has been removed from the global config and added in the remote config

// old way
typeahead({
    // ...
    debounceRemote: 300,
})

// new way
typeahead({
    // ...
    remote: {
       // ...
       debounce: 300, /* defaults to 200 milliseconds */ 
   }
})

Non-breaking changes

Some default values have changed. Earlier the highlight config option was disabled by default, now it is enabled by default. Set highlight: false to disable this option.

Info

The keys and groupKey config options support selecting nested properties using dot notation.
Minor style improvements (shadows, spacing, etc.)
Performance improvement of search algorithm
A new demo is available at https://typeahead.digitalfortress.tech/demo.html that can be used to search results from a list of about 50k records. The header displays the time required to fetch results.

Release Logs

⚙️ chore: set highlight config option to true by default
⚡️ chore: limit input query tokens to improve performance
📝 chore: add example to test performance
💥 chore: refactor items to hits for clarity
♻️ chore: cleanup unrequired assignments
📝 docs: add details about support for nested properties for groupKey config option
✅ test: added e2e test for groupKey
✨ feat: add support for nested keys when using the groupKey
📝 docs: add usage details of nested keys
✅ test: add e2e test for validating usage of nested keys
✨✅ feat: add support for nested keys
🦺 chore: mark package as side effect free
🩹 fix: highlight all search terms correctly
♻️ chore: refactor accessibility tests to use esm version
🏷️ chore: correct esm /umd typings
🧑‍💻 chore: add recipe to generate packed version for testing types
⬆️ chore: upgrade dependencies
📝 docs: add details for trie internal methods
💥 chore: refactor container to wrapper in the resultSet
💥 feat: use return value of empty template to display default suggestions/custom html
🎨📝 docs: add details about tokenizer, minor styling
✅ test: add unit + e2e tests for tokenizer
✨ feat: add tokenizer config option
📝 docs: replace artifacts of identifier and dataTokens
💥 chore: replace groupIdentifier by groupKey
💥 chore: replace identifier and dataTokens by keys
📝 docs: update readme, doc site
✅ test: fix tests post removal of deprecated items
💥 chore: move config debounceRemote into remote config
💄 style: add shadow, curved borders and max height for suggestion list
🗑️ chore: remove config classname in favor of wrapper class
🩹 fix: highlight multiple words irrespective of order for multiple queries
⚡️ feat: optimise code for speed, early exits, misc efficiency updates
⚡️ feat: optimise the search function of trie
⚡️ feat: improve performance of the find fn within the trie
⚡️ feat: optimise performance

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Contributors

Contributors

Breaking changes

Non-breaking changes

Info

Release Logs

Releases: digitalfortress-tech/typeahead-standalone

v5.4.0

v5.3.2

v5.3.1

v5.3.0

Contributors

v5.2.0

Contributors

v5.1.0

v5.0.0

Breaking changes

Non-breaking changes

Info

Release Logs

v4.26.0

v4.25.1

v4.25.0