CODEWITHSUNDEEP
jquery
Swapnali Hadawale
Swapnali Hadawale

Reputation: 121

How to make full text search from client side using jquery?

I want to make full text search from client side using Jquery. Found some solutions but they all are giving exact match.

I want to perform Boolean search on the data. The data is present on client side in tree format.

Eg. If I put required search filter on search engine, it will show me exact match with relevant data, that same search want to perform on client side.

Tried - http://www.redotheweb.com/2013/05/15/client-side-full-text-search-in-css.html it gives exact match. but if I add multiple words in search field it fails. Finding for better solution.

Anybody is having idea how to perform this kind of search ? or knowing any plugin, then please suggest for best.
Thanks in advance. :)

Upvotes: 0

Views: 804

Answers (1)

Lukas Safari
Lukas Safari

Reputation: 1978

you can use FuseJs. of course its not a jquery plugin but a javascript library. its using fuzzy search in the background to find what you want.

FuseJs is a Lightweight fuzzy-search, in JavaScript, with zero dependencies.

you can take a look at Demo and usage here

and here is the quick look at the library.

lets grab this array of objects as our model :

var list = [
     {
        title: "Old Man's War",
        author: {
          firstName: "John",
          lastName: "Scalzi"
        }
     },
     {
        title: "The Lock Artist",
        author: {
          firstName: "Steve",
          lastName: "Hamilton"
        }
     },
     {
        title: "HTML5",
        author: {
          firstName: "Remy",
          lastName: "Sharp"
        }
     }
]

lets search in these array and find items with the key:

var options = {
  shouldSort: true,
  threshold: 0.6,
  location: 0,
  distance: 100,
  maxPatternLength: 32,
  minMatchCharLength: 1,
  keys: [
    "title",
    "author.firstName"
]
};
var fuse = new Fuse(list, options);
var result = fuse.search("The Lock Artist"); //this can be read from an input

the result of this would be :

[
  {
    "title": "The Lock Artist",
    "author": {
      "firstName": "Steve",
      "lastName": "Hamilton"
    }
  }
]

there is a lot of options that you can see in a official website.

Note for better result :

for better result and more exact matches you should change Threshold and Distance option.

Threshold :

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.

Distance :

Determines how close the match must be to the fuzzy location (specified by location). An exact letter match which is distance characters away from the fuzzy location would score as a complete mismatch. A distance of 0 requires the match be at the exact location specified, a distance of 1000 would require a perfect match to be within 800 characters of the location to be found using a threshold of 0.8.

For example in the official website when you search for word "Steve" you will get "Jeeves" result too. as I said we should change distance and threshold.

in this case settings would be :

Threshold: 0.2

Distance: 0

Upvotes: 2

Related Questions