CODEWITHSUNDEEP
javascriptsearch
The Old County
The Old County

Reputation: 109

Reactjs - on the fly search results

I've created a filter/sort module that will allow the user to type in the name of a company -- and it will create the api query string to do the search on the fly.

However, if the user types too fast -- the calls would stack or come too late to be relevant to the user's search. How do I improve the search to get the very latest parameters -- when I set the state for these filters/orderby - there is already a delay

itemsReady -- is a boolean to toggle on a spinner/show results

  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
      }
    });
  }

I've tried to set flags -- if isSearching -- or oldFilterBy - last state --- and to try and run the search again - the last resort here is to place a submit button to action the filter, but the onfly search is good otherwise.

Upvotes: 0

Views: 246

Answers (2)

julien.giband
julien.giband

Reputation: 2619

setTimeout returns a handle that you can later use to cancel its function call by calling clearTimeout. Typically, this kind of trigger while the user is typing is done like so:

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>

Upvotes: 0

Aarti Mishra
Aarti Mishra

Reputation: 86

try calling out search event using debounce concept so that it fetches your strings correctly when the user has done typing or taken a pause. https://medium.com/walkme-engineering/debounce-and-throttle-in-real-life-scenarios-1cc7e2e38c68

Upvotes: 1

Related Questions