21

サーバーからのいくつかのデータを表示するためにtwitterのブートストラップタイプアヘッドを使用します。問題は、ユーザーが文字を入力するとタイプアヘッドがサーバーにajax呼び出しを行い、2文字または3文字をすばやく入力しようとすると、サーバーに2または3のajax呼び出しが行われることです。ユーザーが文字を入力してサーバーへの ajax 呼び出しを 1 つだけ行うと、遅延が発生する可能性があります。

現時点での私のコード:

$('#SEARCH-INPUT').typeahead({
                            source: function (query, process) {

                                jQuery.ajax({
                                    type: "GET",
                                    url: "/organisations/search",
                                    data: {search_name: $("#SEARCH-INPUT").val()},
                                    beforeSend: function(){
                                        $("#SEARCH-LOADING").show();
                                    },
                                    success: function (data) {
                                        organisations = [];
                                        organisations_hash = {};
                                      $.each(data, function(i, item){
                                        organisations_hash[item.name.toUpperCase()] = item.id;
                                        organisations.push(item.name);

                                      });
                                      organisations.sort();

                                      $("#SEARCH-LOADING").addClass("hidden");
                                      process(organisations);
                                    },
                                    error: function (){ alert("error");},
                                    async:   false
                                    });
                            }
                            ,updater: function (item) {
                                $("#SEARCH-INPUT").val(item);
                                $("#SEARCH-BUTTON").click();
                                return item;
                            }
                            ,items: 9
                            ,minLength: 1
                       });
4

1 に答える 1

43

この解決策を使用してください：

(function() {
    var timeout;

    $('[name="fill"]').typeahead({
        source: function(value) {
            if (timeout) {
                clearTimeout(timeout);
            }

            timeout = setTimeout(function() {
                alert(value);
            }, 300);
        }
    });
})();

実際に見る:

http://jsfiddle.net/nnPVn/

setTimeout と clearTime は正常に動作します!

于 2013-06-26T11:24:44.713 に答える