Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add search throttling and min search text length options #117

Open
bakanyaka opened this issue Jul 2, 2018 · 5 comments · May be fixed by #335
Open

Add search throttling and min search text length options #117

bakanyaka opened this issue Jul 2, 2018 · 5 comments · May be fixed by #335

Comments

@bakanyaka
Copy link

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
Copy link
Owner

riophae commented Jul 2, 2018

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
Copy link
Owner

riophae commented Jul 4, 2018

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
Copy link

tangdw commented Dec 17, 2018

本地搜索 INPUT_DEBOUNCE_DELAY 可以配置吗

@David-Tsui
Copy link

David-Tsui commented Jan 11, 2019

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
Copy link

datbth commented Jun 25, 2019

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:
image
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

@antonio-vargas antonio-vargas linked a pull request Jan 23, 2020 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants