[Question] how to use this in conjunction with dropdown/autocomplete ?

[simkimsia]

A bit like how stackoverflow does it

I am looking at the example page https://taufik-nurrohman.js.org/tag-picker/ but still not find something that works like that

[jnnkB]

I think you you'd have to build the autocomplete thing yourself. You could probably use the following parts of the API:

picker.on("blur", function () {
	// hide suggestions
})


picker.on("focus", function () {
	// show suggestions
})


const input = document.querySelector(".tag-picker__input");
input.addEventListener("input", (event) => {
	console.log(event, input.innerText);
	// filter suggestions
});

And you could add new tags with picker.set(tag).

[simkimsia]

ok thank you 🙇🏻‍♂️

[taufik-nurrohman]

The idea is that you add a key(down/up) listener to perform an AJAX search then display the results in a dropdown menu that you create yourself.

let debounce;
picker.input.addEventListener('keydown', e => {
    debounce && clearTimeout(debounce);
    debounce = setTimeout(() => {
        let query = this.textContent;
        showSearchResults(query);
    }, 100);
    e.preventDefault();
});

function showSearchResults(query) { /* ... */ }

Then, on every menu item, add an event listener to execute the picker.set() method:

let item = document.createElement('a');
item.textContent = data.title; // From AJAX response
item.addEventListener('click', function(e) {
    picker.set(this.textContent);
    picker.input.textContent = "";
    e.preventDefault();
});