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並閱讀有關“源代碼”的部分。 您可以通過傳遞給異步數據源的源函數的參數來定義“過程”回調。