javascript - 为什么不显示选项？ (jqueryui-自动完成)

Question

我正在尝试构建带有加载屏幕的自动完成功能。

使用的技术:Materialize (1.0.0-rc.2)、jQueryUi AutoComplete (1.11.4)。

它可以正常工作，但不能使用“自制”加载弹出窗口。

我做了一个 jsfiddle举个例子。在输入中输入字符，你会看到错误(加载弹出窗口正确打开但选项不会显示)。如果你想看到它的工作，注释指定的行)。

自动完成以这种方式初始化(​​setTimeout 模拟 ajax 调用):

var autocompletion = $("#autocompl").autocomplete({
  source: function(request, response) {
    Wait.show(function() {
      setTimeout(function() {
        var elementsFilter = availableTags.filter(tag => tag.toUpperCase().includes(request.term.toUpperCase()));
        response(elementsFilter);
        Wait.remove();
      }, 1000)
    });
  },
}).autocomplete('instance');

加载弹出窗口是一个非常基本的自制“插件”，具有两个功能 show 和 remove

var Wait = (function() {
  var instanceModal = null;

  return {
    show: function(callback, options) {
      if (!instanceModal) {
        $('#modalePatientez').modal({
          dismissible: false
        });
        instanceModal = M.Modal.getInstance($('#modalePatientez'));
      }
      instanceModal.options.onOpenEnd = function() {
        callback();
      };
      instanceModal.open();

    },

    remove: function(callback) {
      if (callback) {
        instanceModal.options.onCloseEnd = callback;
      }
      instanceModal.close();
    }
  }
})();

我尝试手动调试并使用 console.log :函数正确执行(以正确的顺序)。

你知道为什么在“启用”加载弹出窗口时不显示选项吗？

Answer 1

问题的根本原因是输入类型在弹出窗口打开后立即失去焦点。因为 JQuery UI 取消了整个自动完成执行，我们没有看到预期的行为。解决方案是防止模糊事件(防止特定输入失去焦点)。以下代码将解决您的问题:

$("#autocompl").change(function(e){
  e.stopImmediatePropagation();
  $(this).off("blur");
});

working jsfiddle link