Как сделать поисковую строку с выпадающим списком (как в браузерах) и что лучше для этого использовать?

Question

Как мне создать строку поиска с выпадающим списком (подсказками), какие языки программирования лучше для этого использовать, (чтобы было с анимацией) и возможно ли это сделать только с помощью html и css? То есть, когда вы вводите определенные символы/текст, появляется список, и вам предлагается щелкнуть по одному из них (как в браузере), так, когда вы нажимаете на определенный из предложенных пунктов, он открывается.

Что-то вроде этого:

Вот макет:

Answer 1

На чистом html/css не получится. Можно на JS.

Вообще JS — хорошая штука. Вот учебник.

Данные для поиска должны где-то храниться, кстати. Почитайте про json, fetch-запросы.

Я делал вот так, у меня тут поиск по ФИО клиентов (на идеальное решение не претендую):

function search() {
    const searchBar = document.querySelector('.header-search__input');
    const results = document.querySelector('.header-search__results');
    const searchClearBtn = document.querySelector('.header-search__clear-btn');
    let clientsArray = [];
    const WAIT_TIME = 300;
    let timeout;

    function renderResults() {
        document.addEventListener('click', function(e) {
            if ((!searchBar.contains(e.target))) {
                results.classList.remove('be');
            };
        });
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            results.innerHTML = '';
            const searchRequest = ((searchBar.value).replaceAll(' ', '')).toLowerCase();
            clientsArray.forEach(client => {
                const fullname = (client.surname + client.name + client.lastName).toLowerCase();
                if (fullname.includes(searchRequest)) {
                    const resultItem = document.createElement('li');
                    resultItem.classList.add('basic-text', 'header-search__results__item');
                    resultItem.setAttribute('tabindex', '0');
                    resultItem.innerHTML = `${client.surname} ${client.name} ${client.lastName}`;
                    resultItem.addEventListener('click', () => {
                        changeClient(client);
                    });
                    results.append(resultItem);
                }
                });
                if (results.innerHTML === '') {
                    const resultItem = document.createElement('li');
                    resultItem.classList.add('basic-text', 'header-search__results__item--empty');
                    resultItem.innerHTML = `По запросу «${searchBar.value}» не найдено ни одного клиента`;
                    results.append(resultItem);
                };
        }, WAIT_TIME);
    }

    searchBar.addEventListener('focus', async () => {
        clientsArray = await data.getClientsDataArray();
        if (searchBar.value.trim()) {
            searchClearBtn.classList.add('be');
            results.classList.add('be');
            renderResults();
        }
    });

    searchBar.addEventListener('input', () => {
        if (searchBar.value.trim()) {
            searchClearBtn.classList.add('be');
            results.classList.add('be');
            renderResults();
        } else {
            results.classList.remove('be');
            searchClearBtn.classList.remove('be');
        }
    });

    searchClearBtn.addEventListener('click', () => {
        searchBar.value = '';
        results.classList.remove('be');
        searchClearBtn.classList.remove('be');
    });
};

Но... не зная JS вот так сразу вы вряд ли сможете что-то сделать.

БЛОГ НА HUSL

Как сделать поисковую строку с выпадающим списком (как в браузерах) и что лучше для этого использовать?

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