Мгновенный поиск с ванильным JavaScript

Автор оригинала: FreeCodeCamp Community Member.

Первоначально опубликовано www.florin-pop.com

Тема На неделю # 15 Недельный кодирующий вызов является:

Мгновенный поиск

Мы живем в быстрном мире, и мы хотим, чтобы все было быстрым, включая результаты поиска, вот почему функция мгновенной поисковой функции стала в значительной степени A «Должно иметь» функцию вместо «приятно иметь».

В этой статье мы собираемся построить это особенность , но только используя ванильный JavaScript: Smiley:.

Ниже приведен просмотр реализация того, что мы собираемся построить в этой статье. Давайте искать по странам мира, чтобы увидеть их население и флаг:

Примечание : То, что вы можете использовать React, Vue, угловую или любую другую структуру/библиотеку для создания этой функциональности, хотя для того, чтобы сделать его в ванильном JavaScript, гораздо веселее. ?

HTML

Нам понадобится 2 вещи в вашем HTML:

А Поиск поле
А Результаты Div, где мы покажем результаты поиска

Обычно мы собираемся в стайлингскую часть рядом, но в этом случае учитывая, что у нас еще нет всей разметки (вы увидите в данный момент), мы сначала доберемся до деталей JS. ?

JavaScript

Давайте сделаем план, прежде чем мы на самом деле введите любой код. То, что нам нужно сделать:

Соберите список всех стран в мире
Показать список стран
Обновите результаты на основе поискового запроса

Довольно круто, а? ?

Шаг один – получение данных

Я нашел хороший API, который мы можем использовать, чтобы получить список нужных нам стран. Это: RestCountries.eu Отказ

Мы собираемся использовать встроенные Fetch API Для того, чтобы извлечь все страны, и мы собираемся хранить их в переменной: страны Отказ

let countries;

const fetchCountries = async () => {
    countries = await fetch(
        'https://restcountries.eu/rest/v2/all?fields=name;population;flag'
    ).then(res => res.json());
};

Как видите, мы создали функцию ASYNC; Вы можете прочитать больше об этом здесь Отказ

Также обратите внимание, что мы хотим только 3 поля из API (имя, население и флаг), так что это то, что мы собираемся получить от API, установив Поля Параметр запроса.

Шаг два – отображение данных

Теперь нам нужно создать структуру нашего списка, чтобы отобразить данные, и для этого мы собираемся создать все элементы, которые нам нужны ( ul , li , заголовки и т. Д.) функции, и мы вставим их в Результаты Div Мы объявили в нашем HTML.

Мы также собираемся позвонить нашему FetchCountries Функция здесь, потому что мы хотим петлю по странам, чтобы создать соответствующие элементы:

const results = document.getElementById('results');

const showCountries = async () => {
    // getting the data
    await fetchCountries();

    const ul = document.createElement('ul');
    ul.classList.add('countries');

    countries.forEach(country => {
        // creating the structure
        const li = document.createElement('li');
        li.classList.add('country-item');

        const country_flag = document.createElement('img');
        // Setting the image source
        country_flag.src = country.flag;
        country_flag.classList.add('country-flag');

        const country_name = document.createElement('h3');
        country_name.innerText = country.name;
        country_name.classList.add('country-name');

        const country_info = document.createElement('div');
        country_info.classList.add('country-info');

        const country_population = document.createElement('h2');
        country_population.innerText = numberWithCommas(country.population);
        country_population.classList.add('country-population');

        const country_popupation_text = document.createElement('h5');
        country_popupation_text.innerText = 'Population';
        country_popupation_text.classList.add('country-population-text');

        country_info.appendChild(country_population);
        country_info.appendChild(country_popupation_text);

        li.appendChild(country_flag);
        li.appendChild(country_name);
        li.appendChild(country_info);

        ul.appendChild(li);
    });

    results.appendChild(ul);
};

// display initial countries
showCountries();

// From StackOverflow https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

Существует «немного» бит кода выше, поэтому давайте сломаемся. ?

Во-первых, у нас есть наш список ( ul ) с Ли S, которые созданы в foreach петля.

Все Ли S У трех детей:

Флаг – IMG
Название заголовок страны – H3.
А Div который держит: (а) население Номер – H2 – и (б) «Население» Текст – H5.

Мы организовали их таким образом, потому что в CSS будет легче выровнять все, используя Flexbox Отказ

Наряду с этим мы добавили Класс Для каждого элемента, потому что мы хотим стиль их индивидуально в CSS, а затем мы использовали Приложение Чтобы добавить эти элементы в домо в конце foreach функция.

И, наконец, у нас есть Номер SwithComma Функция из Stackoverflow, которая добавит запятую как тысячу сепаратора для население номер.

Шаг 3 – Обновите представление на основе поискового запроса

На этом заключительном шаге мы собираемся получить поисковый запрос от вход Прикрепляя EventListener На нем, и мы собираемся изменить наши Showsountries Функция так что это будет Фильтр Из значения, которые мы не хотим отображаться. Давайте посмотрим, как мы можем сделать это:

const search_input = document.getElementById('search');

let search_term = '';

search_input.addEventListener('input', e => {
    // saving the input value
    search_term = e.target.value;

    // re-displaying countries based on the new search_term
    showCountries();
});

const showCountries = async () => {
    // clear the results
    results.innerHTML = '';

    // see code above at Step 2.

    countries
        .filter(country =>
            country.name.toLowerCase().includes(search_term.toLowerCase())
        )
        .forEach(country => {
            // see code above at Step 2.
        });

    // see code above at Step 2.
};

Как вы можете видеть, мы добавили две новые вещи в Showsountries Функция:

Мы очищаем предыдущие Результаты Установив innerhtml к пустой строке
Мы фильтруем страны Проверяя ли введенные search_term это включены В Имя из страны, и мы также конвертируем эти два значения Толкание Как пользователь может ввести прописные буквы, и мы все еще хотим отображать соответствующую страну

Весь код JS

Ниже вы можете найти весь код JS на случай, если вы хотите скопировать его:

const search_input = document.getElementById('search');
const results = document.getElementById('results');

let search_term = '';
let countries;

const fetchCountries = async () => {
    countries = await fetch(
        'https://restcountries.eu/rest/v2/all?fields=name;population;flag'
    ).then(res => res.json());
};

const showCountries = async () => {
    results.innerHTML = '';

    await fetchCountries();

    const ul = document.createElement('ul');
    ul.classList.add('countries');

    countries
        .filter(country =>
            country.name.toLowerCase().includes(search_term.toLowerCase())
        )
        .forEach(country => {
            const li = document.createElement('li');
            li.classList.add('country-item');

            const country_flag = document.createElement('img');
            country_flag.src = country.flag;
            country_flag.classList.add('country-flag');

            const country_name = document.createElement('h3');
            country_name.innerText = country.name;
            country_name.classList.add('country-name');

            const country_info = document.createElement('div');
            country_info.classList.add('country-info');

            const country_population = document.createElement('h2');
            country_population.innerText = numberWithCommas(country.population);
            country_population.classList.add('country-population');

            const country_popupation_text = document.createElement('h5');
            country_popupation_text.innerText = 'Population';
            country_popupation_text.classList.add('country-population-text');

            country_info.appendChild(country_population);
            country_info.appendChild(country_popupation_text);

            li.appendChild(country_flag);
            li.appendChild(country_name);
            li.appendChild(country_info);

            ul.appendChild(li);
        });

    results.appendChild(ul);
};

showCountries();

search_input.addEventListener('input', e => {
    search_term = e.target.value;
    showCountries();
});

// From StackOverflow https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

CSS.

Наконец, давайте добавим некоторую стайлинг в наше небольшое приложение:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,500&display=swap');

* {
    box-sizing: border-box;
}

body {
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    font-family: 'Roboto', sans-serif;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 100vh;
}

.countries {
    padding: 0;
    list-style-type: none;
    width: 480px;
}

.country-item {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    margin: 10px 0;
}

.country-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.country-flag {
    width: 40px;
}

.country-name {
    flex: 2;
    font-weight: normal;
    letter-spacing: 0.5px;
    margin: 0 5px;
    text-align: center;
}

.country-info {
    border-left: 1px solid #aaa;
    color: #777;
    padding: 0 15px;
    flex: 1;
}

.country-population {
    font-weight: 300;
    line-height: 24px;
    margin: 0;
    margin-bottom: 12px;
}

.country-population-text {
    font-weight: 300;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}

input {
    font-family: 'Roboto', sans-serif;
    border-radius: 3px;
    border: 1px solid #ddd;
    padding: 15px;
    width: 480px;
}

Потому что ничего не понравилось, я не собираюсь в подробности о CSS, но если у вас есть какие-либо вопросы относительно того, что она не стесняйтесь связаться со мной, и я буду рад ответить на ваши вопросы! ?

Заключение

Как уже упоминалось выше, это небольшое приложение может быть сделано гораздо проще с реагированием, Vue или угловой, и вы можете сделать это, если вы хотите для вашего представления, но я хотел играть с ванильными JS, и это был веселый опыт для меня! ?

Как всегда, убедитесь, что вы поделитесь тем, что вы собираетесь создавать!

Счастливое кодирование! ?