jQuery UI 中的自动完成功能运行缓慢。如何通知用户一项工作正在幕后完成？

Question

jQuery UI 1.12.1

在 html 我有一个输入标签。用户输入一些代码。然后我使用 jQuery UI 来组织自动完成。

我的代码：

function select_autocomplete_variant() {
    $("#user_input").autocomplete({
        minLength: 1,
        source: get_array_for_autocomplete(),
    });
}

问题是自动完成的数组相当大。每次用户输入另一个符号时，这段代码都会挂起大约几秒钟。这本身不是问题：用户会等待。但问题是用户在等待时并不知道该程序正在为他工作。

是否可以在自动完成工作时向用户显示旋转光标。

Answer 1

如果您预计结果 'take a long time'，您可以考虑将 minLength 调整为更高的值。

您还可以为 Source 使用函数，允许您执行自己的 AJAX 调用。这使您能够启动和停止 GIF 或显示通知。示例：

function select_autocomplete_variant() {
    $("#user_input").autocomplete({
        minLength: 1,
        source: function(req, resp){
          var $el = $(".ui-autocomplete-input", this);
          $.ajax({
            url: 'mySearch.php',
            data: { term: req.term },
            beforeSend: function(){
              $el.addClass("ui-autocomplete-loading");
            },
            success: function(data){
              $el.removeClass("ui-autocomplete-loading");
              resp(data)
            }
          });
        }
    });
}

在 http://api.jqueryui.com/autocomplete/

的主题下查看更多信息

希望对您有所帮助。

jQuery UI 中的自动完成功能运行缓慢。如何通知用户一项工作正在幕后完成？

Autocomplete in jQuery UI works slowly. How to inform user that a work is being done under the hood?

javascript

jquery-ui