Ability to set debounce parameter for searchBox

[wojtekmieszczak]

It would be great to add developer possibility to set debounce parameter in searchBox options. Real-time results are awesome, but after using it for a while it becomes more and more overwhelming - each keystroke forces rendering new hits and everything is flashing on the screen. On the other hand searchOnEnterKeyPressOnly is often not enough. Debounce parameter seems to be elegant and optimal choice for a lot of scenarios.

http://vuejs.org/guide/forms.html#debounce is a great example of this feature.

[bobylito]

Thanks @salparadise. So far we wanted to avoid debounce because it makes bigger gaps between the modification and the actual rendering of the results. This makes the results feels less instantanneous, therefore the user is less likely to go with trial and errors in its search process. We really want the user to spend the less time searching and more finding.

[wojtekmieszczak]

I see your point, but in my humble opinion as far as it's developers conscious decision depending on their application needs and business requirements making it as an option seems to be a good idea. There is plenty of cases when you cannot get what you really want unless your query is somehow explicit. Until then results are pretty random.

The same story with setting a minimum length for search - it also should be an option without obligation :)
By default you still want the user to spend the less time searching and more finding.

[vvo]

Since every use case is different, @salparadise we would like to provide the two options you proposed:

• minimum query length
• debounce parameter (ms)

What do you think?

(We discussed this with @bobylito also)

[wojtekmieszczak]

Can't wait to give it a try, especially because it's and idea based on project I'm currently working on where this kind of approach is suitable for.

I'm suppose that something as simple as:

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#q',
    debounce: 500, // in ms, 0 as default
    minLength: 2 // 0 as default
  })
);

will do the trick.

[andymac4182]

This would be great for us as we don't have a big enough plan to refresh search results on every key press but can handle after 3 characters and 200 or 500ms debounce.

[vvo]

So what we decided to do is provide the users something like:

searchBox({
  // called everytime we would do a search request
  queryHook: function(inputValue, search) {
    return true; // do the search request
    // return false; // don't do the search request
    // search(); // you can call this to do the search with the provided query that would have done a search request
  }
});

So that any special use case you can have will be supported.

We believe a good search UX should not have any debounce and should show results at the first keystroke. That's why we did not wanted to directly expose those options.

With this approach we have something flexible. Also we understand every use case is different.

[hkdobrev]

Thanks @vvo for pointing me to this issue. The query hook would definitely work for my use case and it is really flexible. It would allow developers to cancel the search in certain circumstances (like #4), debounce, delay the search, do different things on different input values etc.

I'd suggest one addition which would be very helpful to another scenario I have. It would be great if the search function passed to the queryHook function accepts an inputValue argument. This way you would be able to pass a modified input to the search based on certain conditions.

[vvo]

moved to #817