为什么没有显示选项？ （jqueryui-autocomplete）

Question

我正在尝试使用加载屏幕构建自动完成功能。

使用的技术：实体化（1.0.0-rc.2），jQueryUi自动完成（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手动调试：函数正确执行（以正确的顺序）。

您知道为什么“启用”加载弹出窗口时未显示options吗？

Answer 1

问题的根本原因是，弹出窗口打开后，输入类型将失去焦点。因此，JQuery UI取消了整个自动完成执行，因此看不到预期的行为。解决此问题的方法是防止模糊事件（防止特定的输入失去焦点）。以下代码将解决您的问题：

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

working jsfiddle link