UI5 JSONModel Fuzzy Search

[former_member189945]

Introduction

In this blog post I’ll introduce a fuzzy search utility that searches a JSONModel for items matching input text. Fuzzy search or approximate string matching is used to find matching items or text strings when search input does not exactly match any item or part of an item. A really good example of a fuzzy search in use is Google Search’s auto correcting suggestions.

Fuzzy search measures the closeness of search input with the items and then returns best matching items. Closeness can also be called edit distance. Closeness is calculated by counting the number of primitive operations, such as swapping a character with another, needed to convert the search input into an exact match.

Example:

Implementation

Implementation is done by wrapping JavaScript library Fuse.js. Fuse is a lightweight client-side fuzzy-search. in JavaScript. It is meant to be used with small to medium data sets.

As fuzzy search utility is client-side, it is not implemented to work with ODataModels as they may not have all the data available on the client. OData fuzzy search should be implemented on the server.

Usage

Fuzzysearch’s constructor takes three parameters:

• JSONModel

JSONModel that contains the array to be searched.

• path

Path of the array in the JSONModel.

• options

Options to be used with Fuse. Refer to Fuse documentation for all possible options.

Fuzzysearch provides one method: search that is called with a search text string. The method returns an array of best matching item indexes that are sorted by items’ closeness to the search string.

Example with fuzzy search for countries of Europe similar to examples at sap.ui.commons.SearchField:

var aCountriesOfEurope = ["Bulgaria", "Croatia", "Cyprus", "Czech Republic", "Denmark", "Estonia", "Finland", "France",

                          "Germany", "Greece", "Hungary", "Iceland", "Albania", "Andorra", "Austria", "Belarus", "Belgium",

                          "Bosnia and Herzegovina", "Ireland", "Italy", "Latvia", "Liechtenstein", "Lithuania", "Luxembourg",

                          "Macedonia", "Malta", "Moldova", "Monaco", "Netherlands", "Norway", "Poland", "Portugal", "Romania",

                          "Russia", "San Marino", "Serbia and Montenegro", "Slovakia (Slovak Republic)", "Slovenia", "Spain",

                          "Sweden", "Switzerland", "Turkey", "Ukraine", "United Kingdom", "Vatican City"];

aCountriesOfEurope.sort();

var countryJson = {"countries": aCountriesOfEurope};

var countryModel = new sap.ui.model.json.JSONModel(countryJson);

var options = {

 threshold: 0.4

}

var fuzzySearch = util.fuzzysearch(countryModel, "/countries", options);

var results = fuzzySearch.search(“genma”);

Live example

Code link

Thanks for reading.