jquery ajax 在第一次调用时没有填充下拉列表

Question

我有一个输入文本框，每次用户输入数据并填充输入文本时都会触发。我使用的是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

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

阅读引导文档以了解提前输入http://twitter.github.com/bootstrap/javascript.html#typeahead 并阅读有关“源”的部分。您可以通过传递给异步数据源的源函数的参数定义“进程”回调。