【问题标题】:Twitter bootstrap typeahead delay [duplicate]Twitter引导输入延迟[重复]
【发布时间】:2013-06-26 11:04:31
【问题描述】:

我使用 twitter bootstrap typeahead 来显示来自服务器的一些数据,问题是当用户输入一个字母 typeahead 对服务器进行 ajax 调用时,当我尝试快速输入 2 或 3 个字母时,它会进行 2 或 3 个 ajax 调用服务器,当用户输入字母以仅对服务器进行一次 ajax 调用时,是否有可能造成延迟

我现在的代码:

$('#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
                       });

【问题讨论】:

    标签: javascript twitter-bootstrap


    【解决方案1】:

    使用这个解决方案:

    (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 工作正常!

    【讨论】:

    • 它有一个缺陷 - 如果您设置了 minLength,那么当您快速退格输入的文本并清除输入时,超时仍然会触发。我希望它不会......看这个例子:jsfiddle.net/nnPVn/16
    • 上面的问题没有这个问题,因为minLength是1(默认)。
    猜你喜欢
    • 1970-01-01
    • 2015-09-25
    • 1970-01-01
    • 2013-02-15
    • 2012-09-21
    • 1970-01-01
    • 1970-01-01
    • 2010-12-23
    • 1970-01-01
    相关资源
    最近更新 更多