Получить обратно выбранный элемент из 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...


Ответы (0 шт):