using jquery to load a partial view with livesearch

Question

Alright, hoping someone can help. I've got a page used to search for employees. The requirement is that the search pulls back results as you type. Maybe I'm going about this the completely wrong way, but I currently have working code. The problem is that some results are returned out of sequence.

For instance, you may be searching for 'Don', but the results for 'Don' will be returned before you get the results for 'Do', leaving the results for 'Do' on the screen.

Is there any way to clear/cancel any pending results when beginning a new search so that I only get the most current results?

Here is the code:

    $('#searchString').keyup(function () {
        searchPeople($(this).val());
    });

    function searchPeople(searchString) {
        var bu = $('#selectedBU').val();
        $('#people_view').clearQueue().load(
            '@Url.Action("PeopleView", "People")',
            { SearchString:searchString.replace(' ', '*|*'),
              bu:bu });
        $('#searchString').focus();
    }

Answer 1

I would use jquery autocomplete as to not reinvent the wheel :)

If you still want to implement your own autocomplete, you have to stop the previous ajax request(s). You can start here and also have a look at the linked question for even more suggestions.