Add search throttling and min search text length options

[bakanyaka]

Hello. I have a large nested list (80000 items) and everything works fine until you try to search for something. When you start typing first letter of the word into search box, browser freezes for ~30 seconds and it happens with every consecutive letter until you reach like 4th character. What I think could solve this problem is an option to set throttling to like 1s and also cancel search if the search string is less than N number of chars.

[riophae]

Hi! Currently the search is already throtted, but the INPUT_DEBOUNCE_DELAY is a bit too short. I think there should be an option for you to customize it.

As of min search string length limit, that would be helpful and I'll add this option. But most importantly, I'll be continously optimizing the rendering performance, which is the root cause of the problem.

[riophae]

v0.0.31 just came out with a new async searching feature. I recommend you to try it out! Then it should be much smoother.
Today I came up with a new idea about performance optimizing, but it takes time.

[tangdw]

本地搜索 INPUT_DEBOUNCE_DELAY 可以配置吗

[David-Tsui]

Async searching needs a debounce setting, it will call loadOption function immediately now.

*** At now, I use lodash debounce to solve this problem. ***

onQueryChange({ action, searchQuery, callback }) {
  if (action === ASYNC_SEARCH) {
     this.handleSearchQueryChange(searchQuery, callback);
  }
},
handleSearchQueryChange: _.debounce(async function(query, callback) {
  var response = await loadDataFromServer(query);
  callback(null, response);
}, 500),

[datbth]

Async searching needs a debounce setting, it will call loadOption function immediately now.

*** At now, I use lodash debounce to solve this problem. ***

onQueryChange({ action, searchQuery, callback }) {
  if (action === ASYNC_SEARCH) {
     this.handleSearchQueryChange(searchQuery, callback);
  }
},
handleSearchQueryChange: _.debounce(async function(query, callback) {
  var response = await loadDataFromServer(query);
  callback(null, response);
}, 500),

According to my testings, this approach won't work properly.
For example: type in foo, then after 300ms, type in b. This will result in the search for foo being stucked at loading forever:

This is because after 300ms (which is bigger than INPUT_DEBOUNCE_DELAY, 200ms), onQueryChange is fired and it will wait for the callback. However, the callback will never be called because handleSearchQueryChange is debounced

Edited: Just to note, I have cacheOptions prop set to false