CODEWITHSUNDEEP
javascriptmaterializejquery-ui-autocomplete
Clemzd
Clemzd

Reputation: 945

Why options aren't showing? (jqueryui-autocomplete)

I am trying to build an autocomplete with a loading screen.

Technologies used : Materialize (1.0.0-rc.2), jQueryUi AutoComplete (1.11.4).

It works properly but not with a "home made" loading popup.

I've made a jsfiddle to show an example. Enter characters in the input and you'll see the bug (loading popup open correctly but options won't show up). If you want to see it working, comment the indicated lines).

The autocomplete is initialized this way (setTimeout to emulate an ajax call):

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');

The loading popup is a very basic home made "plugin" with two functions show and 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();
    }
  }
})();

I tried to debug by hand and with console.log : functions are executed correctly (in the correct order).

Do you know why options aren't shown when the loading popup is "enabled" ?

Upvotes: 2

Views: 94

Answers (1)

Rahul Raut
Rahul Raut

Reputation: 633

The root cause of the issue is input type looses the focus as soon as the pop-up opens. Because of that JQuery UI cancels the whole autocomplete execution and we don't see the expected behavior. Solution to this is preventing blur event (preventing particular input from loosing focus). Following code will solve your problem: 

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

working jsfiddle link

Upvotes: 2

Related Questions