Получить обратно выбранный элемент из Autocomplete
Я написал код autocomplete, он работает и работает хорошо
const Default = {
url: null
};
class Autocomplete {
constructor(element, options) {
if (!options.url) {
throw new Error('Autocomplete url is mendatory');
}
this._element = element
this._select = select
this._options = { options }
this._options = { ...Default, ...options }
this._timeout = 0;
this._init()
}
_init() {
this._createContainer();
this._addEventListeners();
}
_createContainer() {
this._container = document.createElement('div');
this._container.classList.add('bg-white', 'absolute', 'z-30', 'w-full', 'rounded-md', 'shadow-md', 'max-h-96', 'overflow-x-auto', 'divide-y', 'divide-slate-200');
this._element.parentNode.appendChild(this._container);
}
_addEventListeners() {
this._element.addEventListener('input', e => this._onInput(e));
}
_onInput(e) {
clearTimeout(this._timeout);
let term = e.target.value;
if (term.length >= 3) {
this._timeout = setTimeout(() => {
axios.get(this._options.url, {
params: {
term: term,
},
}).then((response) => {
let results = response.data
this._container.innerHTML = ''
if (results.length) {
const ul = document.createElement('ul');
results.forEach((result, index) => {
const li_label = document.createElement('li');
li_label.classList.add('text-sm', 'text-slate-400', 'px-3', 'py-2');
li_label.innerHTML = result.label.toLowerCase();
ul.appendChild(li_label);
result.children.forEach((children, index) => {
const li_children = document.createElement('li');
li_children.innerHTML = children.name;
li_children.classList.add('text-lg', 'px-3', 'py-3', 'cursor-pointer', 'hover:bg-slate-100');
li_children.addEventListener("click", function(e) {
this.select = children
});
ul.appendChild(li_children);
})
})
this._container.appendChild(ul)
}
})
.catch((response) => {
console.error(response)
});
}, 270);
}
}
}
window.Autocomplete = Autocomplete;
Вызываю Autocomplete для input так:
document.addEventListener('DOMContentLoaded', function() {
const element = document.querySelector('input[name="main_search"]')
new Autocomplete(element, {
url: 'https://site.com/api/v1/autocomplete',
select: result => {
console.log(result)
}
});
});
Мне нужно получать значение выбраного элемена и я не понимаю как это сделать, в случае если пользователь нажмет на li_children обратно должен возращатся массив children чтобы я его смог получить в функции select...