Reactjs - 即时搜索结果

Question

我创建了一个 filter/sort 模块，允许用户输入公司名称 -- 它将创建 api 查询字符串以进行即时搜索.

但是，如果用户键入的速度太快——调用会堆积或来得太晚，无法与用户的搜索相关。我如何改进搜索以获得最新的参数——当我为这些 filters/orderby 设置状态时——已经有一个延迟

itemsReady -- 是一个布尔值，用于打开 spinner/show 结果

  filterResults(configuration){
    let that = this;

    this.setState({
      filterBy: configuration.filterBy,
      orderBy: configuration.orderBy,
    });

    this.setState({
      itemsReady: false,
    });

    setTimeout(() => {
      that.runSearch();
    }, 1);
  }



  runSearch(){

    let that = this;

    let params = {
      "pageSize": this.state.pageSize,
      "pageNumber": this.state.pageNumber,
      "orderBy": this.state.orderBy,
      "filterBy": this.state.filterBy
    }

    this.props.fetchFullSearch(this.state.serviceCategoryId, JSON.stringify(this.state.termsData), params, function(resp){
      if(resp && resp.status===200){
  
        that.setState({
          searchtermresults: resp,
          pageCount: Math.ceil(resp.data.count/that.state.pageSize),
          isSearching: false,
        });
    
        let accountType = "guest";

        if(isLogged()){
          if(isBuyer()){
            accountType = "buyer";
          }
          if(isPartner()){
            accountType = "partner";
          }
        }

        that.buildResultList(accountType);


      }else{
        //error has occured - show error snackbar
      }
    });
  }

我已经尝试设置标志 -- 如果是正在搜索 -- 或 oldFilterBy - 最后状态 --- 并尝试运行再次搜索 - 这里最后的手段是放置一个提交按钮操作过滤器，但仅搜索否则很好。

Answer 1

尝试使用去抖动概念调出搜索事件，以便在用户完成输入或暂停时正确获取您的字符串。 https://medium.com/walkme-engineering/debounce-and-throttle-in-real-life-scenarios-1cc7e2e38c68

Answer 2

setTimeout returns 一个句柄，稍后您可以使用它来通过调用 clearTimeout 取消其函数调用。通常，这种在用户键入时触发的方式如下：

window.addEventListener('load', _e => {
  const searchField = document.querySelector('#search-field');
  let searchTo;
  searchField.addEventListener('input', e => {
    //That's what you need to do
    if (searchTo)
      clearTimeout(searchTo);
    searchTo = setTimeout(doMySearch, 300); //<-- adjust this delay to your needs
  });
  
  function doMySearch() { //This implementation is meaningless. It's just for you to see what's happening
    searchTo = undefined;
    document.querySelector(".searches").innerText += `\n"${searchField.value}"`
  }
});

<label for="search-field">Search here</label>
<input type="search" id="search-field" />
<h5>Searches:</h5>
<pre class="searches">

</pre>

Reactjs - 即时搜索结果

Reactjs - on the fly search results

javascript

search