jquery ajax not populating the drop down on first call

Question

I have an input text box which fires each time when the user enters data and fills the input text.I'm using bootstrap typehead . Problem is when i enter a letter a it does fire ajax jquery call and fetch the data but the input text box is not populated.Now when another letter aw is entered the data fetched against letter a is filled in the text area.

I have hosted the code here http://hakunalabs.appspot.com/chartPage

Ok so here is part of my html code

<script type="text/javascript">

    $(document).ready(function () {
        $('#txt').keyup(function () {
            delay(function () {
                CallData();
            }, 1000);
        });
    });

    var delay = (function () {
        var timer = 0;
        return function (callback, ms) {
            clearTimeout(timer);
            timer = setTimeout(callback, ms);
        };
    })();
</script>

<input type="text" id="txt" runat="server" class="span4 typeahead local remote" placeholder="Search..." />

And here is my javascript code

    var DataProvider;
function CallData() {
    DataProvider = [];
    var vdata = $('#txt').val();
    if (vdata != "") {
        var urlt = "http://examples/search?keyword=" + vdata + "&callback=my_callback";
        $.ajax({
            type: "GET",
            url: urlt,
            jsonpCallback: "my_callback",
            dataType: "jsonp",
            async: false,
            error: function (xhr, errorType, exception) {
                var errorMessage = exception || xhr.statusText;
                alert("Excep:: " + exception + "Status:: " + xhr.statusText);
            }
        });


    }
}

function my_callback(data) {


    var NameArray = new Array();
    var descArray = new Array();

    for (var i = 0; i < data.count; i++) {
        NameArray.push(data.response[i].days_till_close + " Days Left | " + data.response[i].name + " | " + data.response[i].description);
    }

    for (var i = 0; i < data.count; i++) {
        descArray.push(data.response[i].description);
    }

    DataProvider = [];
    for (var i = 0; i < data.count; i++) {
        var dataObject = { id: i + 1, name: NameArray[i], description: descArray[i] };
        DataProvider.push(dataObject);
    }

    var vdata = $('#txt').val();
    var urlp = "http://example.com/v1/members/search?keyword=" + vdata + "&my_callbackMember";
    $.ajax({
        type: "GET",
        url: urlp,
        jsonpCallback: "my_callbackMember",
        dataType: "jsonp",
        error: function (xhr, errorType, exception) {
            var errorMessage = exception || xhr.statusText;
            alert("Excep:: " + exception + "Status:: " + xhr.statusText);
        }
    });


}

function my_callbackMember(data) {
    var memberArray = new Array();

    for (var i = 0; i < data.count; i++) {
        memberArray.push(data.response[i].name);
    }

    for (var i = 0; i < data.count; i++) {
        var dataObject = { id: i + 1, name: memberArray[i] };
        DataProvider.push(dataObject);
    }

    localStorage.setItem("name", JSON.stringify(DataProvider));

    var sources = [
      { name: "local", type: "localStorage", key: "name", display: "country" }
    ];



    $('input.typeahead.local.remote').typeahead({
        sources: [{ name: "", type: "localStorage", key: "name", display: "name"}],
        itemSelected: function (obj) { alert(obj); }
    });
}

Answer 1

Your issue is that typeahead can only present to you the results that are already in localstorage at the moment when you do a key press. Because your results are fetched via AJAX, they only show up in localstorage a second or so AFTER you've pressed the key. Therefore, you will always see the results of the last successful ajax requests in your typeahead results.

Read the bootstrap documentation for type aheads http://twitter.github.com/bootstrap/javascript.html#typeahead and read the section about "source". You can define a "process" callback via the arguments passed to your source function for asynchronous data sources.