Explore request timing optimizations for typeahead search and username/tag autocompletion

[jywarren]

Our nice typeahead search is SUPER! (Thanks @milaaraujo @stefannibrasil !!)

I think we could speed it up a bit and also have it be a little less jittery by using a throttling strategy.

See how when you type the word "balloon" it makes 5 different queries?

We're using Bootstrap Typeahead: https://github.com/bassjobsen/Bootstrap-3-Typeahead to run this code.

For starters, we can set the minLength and delay to 3 and 1, respectively, so it only starts searching after 3 characters are input, and only sends one request per second. This should slow things down a good bit (but test it out locally to see if it works for you!)

After merging those changes, we could explore more sophisticated "debounce" strategy -- https://davidwalsh.name/javascript-debounce-function

[daningenthron]

Hi, I'd be interested in working on this - would you prefer to format it as an FTO first?

[jywarren]

Hi! This may be a relatively complex one that would need to be solved in a few parts. But the basic minLength and delay to 3 and 1 could be pretty straightforward. If you'd like to give that a try and are comfortable getting started, you can go ahead, otherwise one of the GCI mentors can perhaps format it as a true guided first timers issue, which we're happy to do. Thanks!

[kevinzluo]

Hi @jywarren .
I was going to post an FTO for this and decided to test out the delay option. It feels that 1s is a bit too long since it appears to me that new searches are made delay milliseconds after the last key was pressed, so the user is forced to wait for a bit even after finishing typing. Maybe we could reduce it?

This is just pure speculation, but I searched around and found the avg typing speed is about 40 wpm and given about 5 characters per word, there will be 1 character around ~300 ms. So maybe we could set the delay to 350 ms so that it will not repeatedly search while the user is typing and won't make the user wait long after they are done?

I will go ahead and post an FTO for this 👍 . If you would like for me to make any changes, just let me know 😄 .

[jywarren]

thanks for doing this! This is merged. I think we could continue to refine this using different strategies like the above debounce. Also perhaps looking at:

https://lodash.com/docs/4.17.10#debounce

https://css-tricks.com/debouncing-throttling-explained-examples/

https://davidwalsh.name/javascript-debounce-function

@milaaraujo @sagarpreet-chadha just a note because I think i've mentioned debounce to both of you at different points, the last link above is pretty good explanation for this strategy!

[jywarren]

Moving this analysis here to help explain the bottlenecks in typeahead:

Note how many requests go out -- i think we can change the settings on the typeahead to refine this. See a gif:

Also note it's sending lots of requests where query is empty. We should adjust so it only sends when there are at least 2.

So we might still pursue:

1. a debounce strategy as described above with initial attempt in initial debounced typeahead with debug statements #3172
2. not sending requests until at least 3 characters are typed
3. local caching of responses (see atwho docs?)

This would apply to both the typeahead search code (using Bootstrap Typeahead):

https://github.com/publiclab/plots2/blob/master/app/assets/javascripts/restful_typeahead.js

And the comment form autocompletion code (using At.js):

https://github.com/publiclab/plots2/blob/master/app/assets/javascripts/atwho_autocomplete.js