--- title: Fuzzy Search description: Dynamically filter list of items on a page sass: ./scss/_fuzzysearch.scss js: ./js/bonsai.fuzzy.search.js --- ## How to use The Fuzzy Search component can be used to filter a list of data in any container, `li`, `tr`, `div` or any other HTML element. In order for the Fuzzy Search component to be able to correctly filter the data, `data-fuzzy-title` attribute needs to be added to the container element with the text to be used to filter based on the users input. The last required element in the DOM is what to be shown when there are no results that match the users input, will default to an element with an id of `no-results`. **JavaScript Initialization** ```javascript import { BonsaiFuzzySearch } from "@ithaka/bonsai/js/bonsai.fuzzy.search"; // Initialize the Fuzzy Search component passing in the containers to be hidden/shown const ExampleSearch = new BonsaiFuzzySearch($("ul#title-search li")}); let searchTimer = 0, userQuerySize = 0; $("#search-filter").on("input propertychange paste", (event) => { clearTimeout(searchTimer); // Creating a 1/2 sec delay from the users input to when to run the Fuzzy Search searchTimer = setTimeout(() => { userQuerySize = event.target.value.length; // Calling search method with the users query only if there is // more than one letter or if the user clears their initial query if (userQuerySize === 0 || userQuerySize > 1) { ExampleSearch.search(event.target.value); } }, 500); }); ``` **DOM** ```html_example
No results matching your query
``` ### Additional Filter Data In some cases, there is a need for more than a single field to filter against. The Fuzzy Search component supports this by adding additional data attributes with the prefix `data-fuzzy-*`, the `*` just needs to be replaced with the desired key. The additional keys also need to be passed in the initialization of the component. **JavaScript Initialization** ```javascript // The only difference from the default example is on the initialization // of the Fuzzy Search component to pass in the keys to be used in filtering // as well as the no results messaging const ExampleSearch = new BonsaiFuzzySearch( $("ul#add-field-search li"), {keys: ["title", "director", "genre"]}, $("#add-field-no-results") ); ``` **DOM** ```html_example
No results matching your query
``` ## Fuzzy Search Configurations The backend of the Fuzzy Search component uses the node package [Fuse.js](http://fusejs.io/). Besides `keys` attribute, there are additional configurations related to the logic behind the Fuzzy Search that can be changed. ```javascript const defaultOptions = { // Whether to sort the result list, by score. shouldSort: false, // List of properties that will be searched. keys: ["title"], // The maximum length of the pattern. The longer the pattern (i.e. the search query), // the more intensive the search operation will be. maxPatternLength: 100, // Determines how close the match must be to the fuzzy location (specified by location). distance: 1000, // Determines approximately where in the text is the pattern expected to be found. location: 0, // At what point does the match algorithm give up. A threshold of 0.0 requires a // perfect match (of both letters and location), a threshold of 1.0 would match // anything. threshold: 0.1, // When true, the algorithm will search individual words and the full string, // computing the final score as a function of both. tokenize: true, // When true, the result set will only include records that match all tokens. Will // only work if tokenize is also true. matchAllTokens: true, // The name of the identifier property. If specified, the returned result will be // a list of the items' identifiers, otherwise it will be a list of the items. id: "itemId" }; ```