Asynchronous ajax calls in a search box

I developed an asp.net solution for a customer some months ago, in which we're using AzureSearch in an input box. My approach was to send an ajax request once a second had transcurred since the last keystroke from the user. But our customer wanted it to always happen onchange of the input box, so we did that.

It has resulted in the client reporting a bug - inconsistent searches. It's because of a race condition, I logged the async calls and that's what happened. I'm thinking about adding a 0.5 sec delay to the javascript autocomplete. Or is there a better way? Like having a pool in javascript. The control we are using is jquery easy autocomplete.

Solution

In the end I did not need to add a delay or a throttle. By checking its official site, I discovered two very useful properties in jquery-easy-autocomplete, which are:

matchResponseProperty: To avoid race conditions, since the last ajax call musn't neccessarily be the last response from the backend service, it will take the last response which has a property named as specified with this attribute, which matches with the current text in the input.
listLocation: I was trying to render a json with an anonymous list of items and a property called InputPhrase, until I came to this, so I specified the list location in the base response object and used this model for the response.
```
public class SearchViewModel
{
    public List<dynamic> Items { get; set; }
    public string InputPhrase { get; set; }
}
```

Lastly, I set matchResponseProperty to "InputPhrase", and listLocation to "Items"