Выбор региона и страны на сайте: виджет с поиском и автоопределением

Реализация выбора региона/страны пользователем на сайте

Пользователь не может найти нужную страну в длинном списке — бросает форму. Мы сталкивались с этим десятки раз и знаем, как сделать выбор страны быстрым и интуитивным. Для интернет-магазина с доставкой по всему миру выбор страны — критический этап оформления заказа. Если пользователь тратит больше 5 секунд на поиск своей страны, он, скорее всего, уйдёт к конкурентам. В нашей практике оптимальный вариант — searchable dropdown с поиском, флагами и автоопределением по IP. Такой виджет сокращает время выбора на 70% по сравнению с обычным select и снижает отказы на 15%.

Какие проблемы решаем

• 200 стран в дропдауне без поиска — пользователь вынужден скроллить вручную до 30 секунд. Решение: фильтруемый список с поиском по названию и коду страны.
• Нет автоопределения языка/валюты — после выбора страны контент не меняется. Мы привязываем выбор к загрузке локализованных данных через API или маппинг.
• Сохранение предпочтений — без записи в localStorage или cookie пользователь снова выбирает страну при каждом визите. Это увеличивает количество действий и снижает retention.
• Неадаптированность под мобильные — мелкие элементы, неработающий поиск. Делаем компонент touch-friendly с виртуализацией списка.

Как мы это делаем

На примере React 18 + Headless UI Combobox. Реализуем кастомный компонент с поиском, флагами и динамической подгрузкой данных. Код ниже — базовая версия, в продакшене добавляем дебаунс, виртуализацию списка и кэширование.

import { Combobox } from '@headlessui/react'; import { useState } from 'react'; import { countries } from './countries-data'; // ISO 3166-1 список function CountrySelector({ value, onChange }) { const [query, setQuery] = useState(''); const filtered = query.length < 1 ? countries : countries.filter(c => c.name.toLowerCase().includes(query.toLowerCase()) || c.code.toLowerCase().includes(query.toLowerCase()) ); return ( <Combobox value={value} onChange={onChange}> <Combobox.Input onChange={e => setQuery(e.target.value)} displayValue={c => c?.name ?? ''} placeholder="Выберите страну" className="country-input" /> <Combobox.Options className="country-dropdown"> {filtered.length === 0 && query.length > 0 ? ( <div className="country-empty">Страна не найдена</div> ) : ( filtered.map(country => ( <Combobox.Option key={country.code} value={country}> {({ active }) => ( <div className={`country-option ${active ? 'active' : ''}`}> <img src={`/flags/${country.code.toLowerCase()}.svg`} width={20} alt="" aria-hidden /> {country.name} <span className="country-code">{country.code}</span> </div> )} </Combobox.Option> )) )} </Combobox.Options> </Combobox> ); } 

Подробнее о компоненте можно прочитать в документации Headless UI Combobox.

Сравнение способов выбора страны

Searchable dropdown в 3-4 раза быстрее обычного select и является лучшим выбором для интернациональных проектов.

Почему стоит использовать автоопределение по IP?

Предустановка страны по IP сокращает количество действий пользователя на один клик. Это особенно важно на лендингах с локализованным контентом — пользователь сразу видит правильный язык и валюту. Реализация через MaxMind или Torann/GeoIP на Laravel занимает пару часов. Пример бэкенда:

// Laravel + Torann/GeoIP или MaxMind public function detectCountry(Request $request): JsonResponse { $geo = geoip()->getLocation($request->ip()); return response()->json([ 'country_code' => $geo->iso_code, 'country_name' => $geo->country, ]); } 

На фронте:

useEffect(() => { fetch('/api/geo/country') .then(r => r.json()) .then(geo => { const detected = countries.find(c => c.code === geo.country_code); if (detected && !value) onChange(detected); // только если не выбрано вручную }); }, []); 

Обратите внимание: автоматическое определение не должно перезаписывать ручной выбор пользователя — используйте проверку !value.

Данные: откуда брать список стран

• Статический JSON — файл с ISO 3166 (код, название на нужных языках, dial-код). Пакет world-countries (~180 KB) или собственный облегчённый список. Стандарт ISO 3166 гарантирует уникальность кодов.
• REST Countries API — https://restcountries.com/v3.1/all — актуальные данные, но внешняя зависимость.
• База на сервере — таблица countries с переводами, фильтрация по активным регионам поставки.

Что входит в работу

• Готовый компонент с searchable dropdown, флагами и поиском
• Автоопределение страны по IP (если нужен бэкенд)
• Сохранение выбора в localStorage/cookie
• Адаптация под мобильные устройства
• Интеграция с существующей системой i18n
• Документация по интеграции и поддержка 1 месяц

Сроки: от 1 до 2 рабочих дней на базовую реализацию. Стоимость рассчитывается индивидуально — напишите нам, оценим проект бесплатно. Гарантируем чистый код и отсутствие багов.

Наши инженеры имеют 5+ лет опыта в веб-разработке. Хотите улучшить UX вашего сайта? Закажите виджет выбора страны у нас — получите готовое решение за 1-2 дня с гарантией качества. Свяжитесь с нами для консультации.