如何在执行自动完成搜索时显示加载图标？

我需要在单独的div中显示该值（因此.ui-autocomplete-loading在此不适用）。我可以开始显示search事件发生时。但我怎么能理解它应该隐藏的时间？如何在执行自动完成搜索时显示加载图标？

2011-10-31 LA_

我假设您使用的是远程数据源。如果是，请在您提供给source参数的功能中使用$.ajax。例如：

$("#auto").autocomplete({ 
    source: function(request, response) { 
     $("#loading").show(); // Where #loading is the loading indicator 

     $.ajax({ 
      url: "Your_URL_HERE", 
      data: request.term, 
      success: function(data) { 
       response(data); 
       $("#loading").hide(); 
      }, 
      error: function() { 
       $("#loading").hide(); 
      } 
     }); 
    } 
});

工作实施例：http://jsfiddle.net/gKFJU/

来源

2011-10-31 21:01:31

我尝试这样做，发现菜单更新之前加载部件有时会隐藏。我试图将它隐藏在ajax'complete'事件上，但没有任何改进。我所做的唯一工作就是将它隐藏在“open”和“close”自动完成事件中。任何想法为什么会这样？该行为似乎表明，在ajax完成后，菜单有时会延迟更新*。 – billynoah

@billynoah这是因为比赛条件。例如：用户键入“foo”，它触发一个term =“foo”的XHR，然后键入“bar”，它触发term =“foobar”的另一个XHR。假设“foo”请求先完成;这意味着你隐藏加载图标。但是菜单不会显示，因为自动完成等待“foobar”请求完成以显示菜单。请注意，该插件处理幕后竞争条件并智能处理乱序AJAX请求。 –

好的谢谢。我想在这种情况下，使用'open'和'close'事件只会在插件完成所有当前请求时更好地移除加载元素。你同意吗？你能想出更好的方法来处理这个问题吗？ – billynoah

CSS解

如果装载元件是输入控制则可以使用CSS一般兄弟选择的同级：

.loading { 
    /* whatever */ 
} 
#autocomplete.ui-autocomplete-loading ~ .loading { 
    background-image: url(loading.gif); 
}

Working example

jQuery的解决方案

您可以添加search和response事件处理程序。

$("#autocomplete").autocomplete({ 
    delay: 500, 
    minLength: 3, 
    source: "/search.json", 
    search: function() { 
     $("#loading2").show(); 
    }, 
    response: function() { 
     $("#loading2").hide(); 
    } 
});

注意，因为这种做法从比赛条件遭受（一）AJAX请求不一定完成在它们启动的顺序（II）可以自动完成射击比搜索更少响应事件。

Combined demo here

来源

2013-12-06 12:35:55

如何在执行自动完成搜索时显示加载图标？

回答

相关问题