jQuery Ajax没有填充第一次调用的下拉列表

Question

我有一个输入文本框，每次用户输入数据并填充输入文本时都会bootstrap typehead 。我正在使用bootstrap typehead 。 问题是当我输入字母a时会触发ajax jQuery调用并获取数据，但未填充输入文本框。现在当输入另一个字母aw时，在文本区域中填充了针对字母a提取的数据。

我已经在这里托管了代码http://hakunalabs.appspot.com/chartPage

好的，这是我的html代码的一部分

<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..." />

这是我的JavaScript代码

    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

您的问题是，提前输入只能在您按键时向您显示本地存储中已经存在的结果。 因为您的结果是通过AJAX提取的，所以它们仅在您按下键后一秒钟左右才会显示在本地存储中。 因此，您将始终在预输入结果中看到最后一次成功的ajax请求的结果。

请阅读引导程序文档以获取预先输入的内容http://twitter.github.com/bootstrap/javascript.html#typeahead并阅读有关“源代码”的部分。 您可以通过传递给异步数据源的源函数的参数来定义“过程”回调。