Итак, я создаю страницу, на которой отображаются все страны мира, используя REST Country V2 API и я хотел бы добавить функцию поиска и фильтрации. панель поиска должна искать и обновлять мою страницу на основе названия страны, и я также хочу раскрывающийся список, в котором я могу обновлять результаты в зависимости от региона.

В настоящее время моя страница показывает все страны и входные данные для поиска и раскрывающийся список для фильтрации по региону, но я не уверен, как сделать эти элементы функциональными.

Должна ли моя панель поиска что-то делать с вызовом API или есть способ фильтрации на основе контента, который уже есть на моей странице?

Вот мои параметры поиска/фильтра (используя tailwind css)

<section class="bg-darkbg pt-32 pb-16 alignfull">
    <div class="container mx-auto flex justify-between">
        
        <div class="relative">
            <i class="fa fa-search text-white absolute left-4 top-4"></i>
            <input type="text" name="search" id="search" class="bg-dark text-white py-3 pl-12 pr-28 rounded-md" placeholder="Search for a country...">
        </div>
        
        <div class="relative">
            <select name="regions" id="regions" class="text-white bg-dark py-3 px-4 pr-16 rounded-md appearance-none">
                <option value="" disabled selected>Filter by Region</option>
                <option value="africa">Africa</option>
                <option value="america">America</option>
                <option value="asia">Asia</option>
                <option value="europe">Europe</option>
                <option value="oceana">Oceana</option>
            </select>
            <i class="fa-solid fa-chevron-down text-white absolute right-4 top-4"></i>
        </div>
    </div>  
</section>
-1
Diggity Doggity 4 Окт 2022 в 21:27
Я проголосовал за закрытие этого вопроса, потому что он скорее основан на мнении. При этом я думаю, что использование indexedDB может быть очень полезным при фильтрации по названию страны.
 – 
ControlAltDel
4 Окт 2022 в 21:40

2 ответа

С тех пор, как вы отметили JavaScript, не думали ли вы об его использовании? В проекте, над которым я работаю, я делаю что-то подобное. Ниже что-то вроде комбинации того, что у меня есть, и вы, кажется, работаете. Чтобы добавить поиск, просто сделайте то же самое, но где .value содержит строку поиска. Вы можете расширить его настолько, насколько вам нужно, и вам не нужно ждать обратной передачи, так как все это делается на стороне клиента.
HTML:

<table>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
    <tr class="all america unitedstates">
        <td>Data 1</td>
        <td>Date 2</td>
    </tr>
</table>

JavaScript:

let rows = document.getElementsByClassName('all');
ChangeView();
function ChangeView() {
    var filter = document.getElementById('filter1').value;
    for (var i = 0; i < rows.length; i++) {
        if (rows[i].classList.contains(filter)) {
            rows[i].style.visibility = 'visible';
        }
        else {
            rows[i].style.visibility = 'collapse';
        }
    }

}
0
Brandon 4 Окт 2022 в 21:44

Насколько я понимаю, можно обойтись как с вызовами API, так и без них.

  1. Если не делать вызовы API, то все будет происходить во фронтенде. Вы делите и сохраняете все страны в разные массивы, например, в зависимости от региона. Когда вы получаете страну поиска и выбранный регион, вы просто проверяете конкретный массив для этого региона и отображаете «найдено» или «не найдено». Если найдено, вы отображаете подробную информацию об этой конкретной стране. Чтобы реализовать функцию поиска, вы можете использовать array.filter(), array.find() или array.includes(), ниже я использую array.includes(). например

const asiaContries = ["China", "Korea", "Apple", "Orange"];
const searchCountry = "Apple";
const selectedRegion = "Asia"

const result = asiaContries.includes(searchCountry);
if (result){display the details of the searchCountry} else {display "not found" }
  1. Если вы хотите выполнять вызовы API, то после того, как вы получите searchCountry и selectedRegion, вам нужно отправить запрос GET на серверную часть, тогда серверная часть может выполнить тот же поиск, что и выше, а затем отправить ответ обратно во внешний интерфейс. конец. Если найдено, отправьте подробную информацию о стране поиска, если не найдено, отправьте «не найдено», например, с кодом состояния 404.

Надеюсь, это поможет.

0
Orvokki 4 Окт 2022 в 22:22