自动完成从API获取数据

Question

I want to create an autocomplete input component that retrieves places from Google Maps Place API.

This is a sample response from this API: https://developers.google.com/places/web-service/search#PlaceSearchResponses

My question is how should I handle user input / typing and calling the API to update the autocomplete options?

Would it be correct to do something like: On keyup set a timeout, to check if the user stopped typing, then call the API after a few seconds; and on keydown clear the timeout to avoid calling the API while the user is still typing?

I don't have access to Google Cloud Platform Console, so I can't enable Maps Javascript API and use Place Autocomplete

Answer 1

Are you using pure javascript? If not, yout could use lodash debounce function , it does exactly what you need.

EDIT: As someone pointed out in the comments, i shouldn't just post a link as an answer, so i'll provide a snippet to help improve this answer

import _ from 'lodash';
$(selector).on('keyup', _.debounce(function (e) {
      // stuff
    }
}, 500));