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.

Sign up for GitHub

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

Jump to bottom

Add example of how to get suggestions via AJAX #632

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add example of how to get suggestions via AJAX #632

wants to merge 3 commits into from

Conversation

romaricpascal
Copy link
Member

@romaricpascal romaricpascal commented Jan 18, 2024 •
edited

Prompted by the review of #611, adds an example illustrating how to implement fetching suggestions from a remote server. It deals with the different bits of logistics around sending GET requests repeatedly:

  • providing user feedback that results are being fetched, including after results are shown
  • providing user feedback if the request errors
  • debouncing the requests while users type to avoid overloading servers and waste bandwidth with requests whose results will get replaced after the next keystroke
  • cancelling in-flight requests to ensure that only the results from the last request sent will show in the result, avoiding a response from an earlier request, but delayed by network and server timings, to replace that of a later request.
Kapture.2024-01-18.at.19.50.40.mp4

@romaricpascal romaricpascal force-pushed the debounced-ajax-example branch 4 times, most recently from eac3e76 to 70cb310 Compare January 18, 2024 19:52
@romaricpascal romaricpascal marked this pull request as ready for review January 18, 2024 19:52
@romaricpascal romaricpascal changed the title [WIP] Add example of how to get suggestions via AJAX Add example of how to get suggestions via AJAX Jan 18, 2024
@romaricpascal
Add example of how to get suggestions via AJAX
2da9401 
Including:
- displaying a loading state
- displaying errors when they occur
- debouncing the calls to avoid to much load for the server
@romaricpascal
Add link on form single example going to ajax source example
51d9011
@romaricpascal
Fix duplicate title and heading when navigating between examples
cb481b6 
Having different titles help users understand they changed page
@tomayac
Copy link

tomayac commented Apr 26, 2024

This PR is gold and should be merged. Not showing a dynamic fetch() is my pet peeve with any autocomplete component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@romaricpascal @tomayac