Auto lookup (AJAX/XHR)

Using XMLHttpRequests (XHR) to present automatic lookup matches for search fields is very common. Due to the async nature of the lookups, I found that the lasts query often comes in earlier than some of the previous queries.

The way it works, is every time an update to the search text box is made, an XHR request is used to query a back-end database. As one is able to quickly type a word, resulting in a batch of queries to the database, it is possible that the first queries return their results later than the last requests.

This causes the first results to overwrite the later results, and in turn shows the wrong matches.

To combat this problem I use 2 counters. A global and local counter. Each query gets a value from the counter. Both counters (local and global) are incremented with each query.

When the results return for each query, it tests the local value against the global value. If they don't match, it means that a more recent query exists, and the result is discarded. In this way, only result with local counter = global counter gets displayed.

Now, the lookups are perfect.

^{By Peet de Vos on 2010-07-07 12:03:00}

Make the Internet even better...

Welcome to Orax Solutions. This website and thousands of other websites are aligned with modern web standards. Orax recommends the following standards compliant browsers: Google Chrome, Safari, Firefox, Opera, Internet Explorer 9, iPad or iPhone to navigate this site.