0

ユーザーがデータを入力して入力テキストを入力するたびに起動する入力テキスト ボックスがあります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); }
    });
}
4

1 に答える 1

0

あなたの問題は、キーを押した時点ですでにローカルストレージにある結果しかタイプアヘッドが表示できないことです。結果は AJAX 経由でフェッチされるため、キーを押してから 1 秒ほど後にローカル ストレージに表示されます。したがって、タイプアヘッドの結果には、最後に成功した ajax リクエストの結果が常に表示されます。

タイプ アヘッドのブートストラップ ドキュメントhttp://twitter.github.com/bootstrap/javascript.html#typeaheadを読み、「ソース」に関するセクションを読んでください。非同期データ ソースのソース関数に渡される引数を介して、「プロセス」コールバックを定義できます。

于 2013-01-11T22:22:13.663 に答える