AJAX and dropdown.show not working

[balex25]

Update: Fixed it after I added searchKeys: ['value', 'name'].

Prerequisites

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed

Hello,

It seems the dropdown it not show when the whitelist is refreshed. If I click again on input the last whitelist is showing.

Code:

  // Credits Tagify
  if(creditsInput) {
    const creditsTagify = new Tagify(creditsInput, {
      whitelist : [], // Initially empty, will be populated via AJAX
      enforceWhitelist: false,
      placeholder: 'Select credits...',
      maxTags: 20,
      editTags: false,
      createInvalidTags: false,
      skipInvalid: true,
      dropdown: {
        enabled: 0, // suggest after 1 character is typed
        maxItems: 10,
        closeOnSelect: true,
        highlightFirst: true,
        searchKeys: ['value', 'name'] // this fixed
      },
      templates: {
        // Custom template for tags
        tag: function(tagData) {
          return `
            <tag title="${tagData.value}"
                contenteditable='false'
                spellcheck='false'
                tabIndex="-1"
                class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ""} ${tagData.value} ${tagData.icon ? 'icon' : ''}"
                ${this.getAttributes(tagData)}>
              <x title='remove tag' class="${this.settings.classNames.tagX}"></x>
              <div>
                <span class="${this.settings.classNames.tagText}">${tagData.icon ? `${tagData.icon} ` : ''}${tagData.name ? `${tagData.name}` : `${tagData.value}`}</span>
              </div>
            </tag>
          `
        },
        // Custom template for dropdown items
        dropdownItem: function(item) {
          return `<div ${this.getAttributes(item)}
            class='${this.settings.classNames.dropdownItem} ${item.class ? item.class : ""}'
            tabindex="0"
            role="option">${item.icon ? `${item.icon} ` : ''}${item.name || item.mappedValue}</div>
          `;
        }
      }

    });

    // listen to any keystrokes which modify tagify's input
    creditsTagify.on('input', onInputCredit);

    function onInputCredit(e) {
      var value = e.detail.value;

      // Abort previous controller if it exists
      if (window.controller) {
        window.controller.abort();
      }

      window.controller = new AbortController();

      creditsTagify.whitelist = null; // reset the whitelist
      creditsTagify.loading(true);

      fetch(ajaxurl + '?action=search_users&term=' + value, {signal: window.controller.signal})
        .then(response => response.json())
        .then(data => {
          creditsTagify.loading(false); // Stop loading animation

          if (data.success) {
            creditsTagify.whitelist = data.data;
            console.log(data.data);

            creditsTagify.dropdown.show(value); // This forces the dropdown to refresh and show
            //creditsTagify.dropdown.toggle(true); // This forces the dropdown to show
            //creditsTagify.dropdown.hide(false);

          } else {
            creditsTagify.whitelist = [];
          }
        })
        .catch(error => {
          console.log(error);
          creditsTagify.loading(false);
        });
    }

  }

I try like as creditsTagify.dropdown.show(value); creditsTagify.dropdown.toggle(true); creditsTagify.dropdown.hide(false); none trigger dropdown. Ajax return follow values:

{
    "success": true,
    "data": [
        {
            "value": "1",
            "name": "Alex"
        },
        {
            "value": "6",
            "name": "test"
        }
    ]
}

[yairEO]

why did you close this? was it solved? a misunderstanding?