Find-as-you-type boxes are usually built by observing changes in a text field, and querying the server via AJAX for search results or suggestions when the field has changed.

UI/UX Design by

We make sure that your target audience has the best possible experience with your digital product. You get:

• Design tailored to your audience
• Proven processes customized to your needs
• An expert team of experienced designers

Read more Show archive.org snapshot

A common problem with this implementation is that there is no guarantee that AJAX responses are evaluated in the same order as the original requests. The effect for the user is that the search results are flashing back and forth while the user is typing the query, and when the user has stopped typing the last results don't always match the final query.

Workarounds

• An dirty solution for small applications is to make the observe frequency low enough that out-of-order responses become unlikely enough. Try to poll the query field for changes every 0.75 seconds or longer. It will still fail when the server is busy or on flaky connections.
• A cleaner solution would be to check whether a response contains the matches for the most recent request, and discard all other responses.
• Or have a client-side queue so you don't send multiple requests at the same time. If you're using Unpoly Show archive.org snapshot , the [up-watch] Show archive.org snapshot or [up-autosubmit] Show archive.org snapshot attributes will do this for you.
• If you make the request yourself you may also choose to abort an earlier XHR request Show archive.org snapshot . You may also abort fetch() requests Show archive.org snapshot .