jeancroy / FuzzySearch

:mag: Fast autocomplete suggestion engine using approximate string matching
MIT License
194 stars 32 forks source link

dynamically adjusting json source #32

Closed halukkaramete closed 2 years ago

halukkaramete commented 2 years ago

In the minimal set up, we have this:

setsource("movies.json");

in my case, I wanted to be something like

setsource("movies.json.php?query"+firstWordOfWhatUserTypedSoFar);

This is because the movies.json in my case 1.6M records and that becomes too much for the js to handle when running your fuzzy search algs. I thought, if I could manage to return a sub set of the movies.json by sending the very first word or whatever he typed up so far, then I can significantly minimize the JSON size being returned by the server.

But I guess this is not possible, or is it?

jeancroy commented 2 years ago

Hi.

You can definitely query your server to update the source.

If you look at setsource it's a simple helper function that's defined by the simple example. You can add stuff to your query or even use another network request library.

In general the score of this library is text similarity math. You bring your own UI and network code.

Also note that if you require the first word to be exact match server side, you may effectively disable fuzzy search for a large amount of query.

Finally you can consider this work to merge new server results into current source https://github.com/jeancroy/FuzzySearch/issues/5 You'll use the identify item option as well as the add method.

halukkaramete commented 2 years ago

How or better put when do you do update the source? For example, when the user hits the space key, how do you run another setsource? I do see that running this effectively changes the data set as your main demo shows: setsource("movies.json", {title:"."}. My guess would be to set up an onKeyUp event and when a space is encountered, get the so far typed input and resubmit to the server via query string. Is it how you would do it too?

Also, is there an easy way to increase the number of suggestions? ( A CSS scroller in the suggestion area would be very handy for example when the user wants to browse the top 100, like this ) Right now, the suggestions caps at 5 items though I do know there should be more to display.

jeancroy commented 2 years ago

when do you do update the source

In general I hook a frequent event like keyup and use debounce methodology. Ie when there's activity the source is dirty, and if there's no activity for some delay (say 50-100ms) then update a dirty source. If you are on hold for too long (say 500ms) send what you have anyway

In general I try to have the whole cycle below 250ms to feel "instant" That is debouce delay + make request + server time + receive request + update source + update search result + update UI < 250ms.

jeancroy commented 2 years ago

is there an easy way to increase the number of suggestions?

For this library you can change those settings https://github.com/jeancroy/FuzzySearch/blob/master/src/init.js#L50 https://github.com/jeancroy/FuzzySearch/blob/master/src/init.js#L24

After that you may need to adjust settings on the UI library

halukkaramete commented 2 years ago

Dear Jean,

I've made the 2 changes in the FuzzzySearch (output_limit: 100, & thresh_relative_to_best: 0.2,) and the UI limit change ( limit:100 ) for the twitter typeahead.

To rule out and make sure that these changes are not avoided due to a possible browser-cache, I moved the entire FuzzySearch.js into the .HTML so I'm sure whatever changed I made on those defaults are reflected in the next run.

I tested the word "paradise" which has countless of references in the database, I still get only 5 items. There are hundreds of references I know in 32,516 records database.

If I were to debug & step thru this, which location would you recommend in the FuzzySearch to do that debugging to find out what is trimming the results down to only 5 items?

On Wed, Feb 9, 2022 at 5:28 AM Jean Christophe Roy @.***> wrote:

is there an easy way to increase the number of suggestions?

For this library you can change those settings https://github.com/jeancroy/FuzzySearch/blob/master/src/init.js#L50 https://github.com/jeancroy/FuzzySearch/blob/master/src/init.js#L24

After that you may need to adjust settings on the UI library

— Reply to this email directly, view it on GitHub https://github.com/jeancroy/FuzzySearch/issues/32#issuecomment-1033278337, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA6X2J2UGTJL36C5ISHMSK3U2HGONANCNFSM5N2ZU24A . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you authored the thread.Message ID: @.***>

halukkaramete commented 2 years ago

To make a debugging effort, I've also modified this output_map:function(root){ console.log(root.item);return root.item }, and from there I can see the 100 items in the console.log

jeancroy commented 2 years ago

Yes for the same debug, you can use fuzzyhound.search("paradise") and see the 100 options without console.log. So it 's all about typeahead.

If you look at the typeahead doc, you see that limit is a property of the dataset. So

 $('#demo-query').typeahead({
            minLength: 2,
            highlight: false, //let FuzzySearch handle highlight
            //limit:100, // not here
        },
        {
            name: 'movies',
            source: fuzzyhound,
            limit:100, // here
            templates: {
                suggestion: function(result){return "<div>"+fuzzyhound.highlight(result)+"</div>"}
            }
        });

See https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md

On the same page they explain how to use typeahead:select event to have your google like behavior you asked on the other thread.

halukkaramete commented 2 years ago

Badabing Badaboom... Perfect observation on your part.. I moved the limit to its new place and as a result, I get the 100 items as expectedly. Thank you for your help. You may close this ticket.

On Wed, Feb 9, 2022 at 6:10 PM Jean Christophe Roy @.***> wrote:

Yes for the same debug, you can use fuzzyhound.search("paradise") and see the 100 options without console.log. So it 's all about typeahead.

If you look at the typeahead doc, you see that limit is a property of the dataset. So

$('#demo-query').typeahead({ minLength: 2, highlight: false, //let FuzzySearch handle highlight //limit:100, // not here }, { name: 'movies', source: fuzzyhound, limit:100, // here templates: { suggestion: function(result){return "

"+fuzzyhound.highlight(result)+"
"} } });

— Reply to this email directly, view it on GitHub https://github.com/jeancroy/FuzzySearch/issues/32#issuecomment-1033862744, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA6X2J73QHNLZJDVUBC2EU3U2J7U5ANCNFSM5N2ZU24A . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you authored the thread.Message ID: @.***>