javascript - 为什么自动完成源功能中的显示不起作用？

问题描述

我的 Jquery 自动完成源函数中有一个显示图像，但它不工作。

我在 chrome 开发人员工具中的源函数内的显示中设置了一个断点。该函数被调用，但没有发生任何事情。我的自动完成功能之外的隐藏和显示有效。

这是我的代码。

echo '
<div id="divAuthorSearch" style="padding: 3px;"><img src="https://www.jqueryscript.net/images/jQuery-Ajax-Loading-Overlay-with-Loading-Text-Spinner-Plugin.jpg"/></div>
<script>
    $("#divAuthorSearch").hide();
    $("#divAuthorSearch").show();
</script>
<style>
       .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
            /* add padding to account for vertical scrollbar */
            padding-right: 20px;
        }
</style>
<script>
$("#authorname").autocomplete({
    minLength: 3,
    source: function(request, response){
        $("#divAuthorSearch").show();
        $.ajax({
            "url" :"/koauthor/SelectEmployee",
            "type" : "POST",
            "data" : JSON.stringify({"name": request.term}),
            "contentType" : "application/json",
            "success" : function(data) {
                response(data);
            },
            "error" : function(error)
            {
                alert("error: "+JSON.stringify("There was an error!"));
            }
        });
        $("#divAuthorSearch").hide();
    }
  }).focus(function(){
      $(this).autocomplete("search", "");
  });

$("#divAuthorSearch").show(); 在我的源函数内部应该显示一个图像，然后图像应该隐藏在 $("#divAuthorSearch").hide(); 之后叫做。

标签： javascriptjqueryhtml

有几件事：

1）我无法弄清楚的目的

<script>
    $("#divAuthorSearch").hide();
    $("#divAuthorSearch").show();
</script>

...为什么在页面加载时立即隐藏某些内容，并在稍后立即再次显示？用户可能甚至不会看到它发生变化，然后再次变回。但无论如何，图像仍然会在之后可见。我假设您最初希望它隐藏，以便在自动完成启动时显示它？如果是这样，那么您不需要 JS，只需"display:none;"在div标签本身上添加一个样式，例如：

<div id="divAuthorSearch" style="padding: 3px;display:none;">

2）在自动完成完成后，您永远看不到图像显示然后隐藏的（其他）原因是您实际上并没有在运行.hide()命令之前等待 AJAX 调用返回结果。AJAX 调用是异步的。这意味着只要执行 $.ajax 命令，就会立即执行下一行 JavaScript。它不等待响应。相反，浏览器的网络处理在后台运行请求，并在收到服务器响应后执行传递给“成功”选项的回调函数。

因此，如果您希望您的图像仅在收到响应后隐藏，您只需将.hide()命令移动到该函数中，以便它等待执行它而不是立即运行它：

source: function(request, response){
    $("#divAuthorSearch").show();
    $.ajax({
        "url" :"/koauthor/SelectEmployee",
        "type" : "POST",
        "data" : JSON.stringify({"name": request.term}),
        "contentType" : "application/json",
        "success" : function(data) {
            response(data);
            $("#divAuthorSearch").hide();
        },
        "error" : function(error)
        {
            alert("error: "+JSON.stringify("There was an error!"));
        }
    });
}

PS这里有一些背景阅读，您可能会发现它的信息。

javascript - 为什么自动完成源功能中的显示不起作用？

问题描述

解决方案

推荐阅读