4

Есть такая формочка заказ билетов, где нужно указать откуда летишь и куда:

$('.js-autocomplete').on('focus', function(){
        window.autocomplite_items = false
        $(this).autocomplete({ 
            source:'https://ufsa.com.ua/ufsa/autocomplete.php', 
            minLength: 2, 
            autoFocus : true,
            select: function( event, ui ) {
                console.log('select');
                window.autocomplite_items = true
                $(this).next().val(ui.item.id);
            },
            close: function(event, ui) {
                if(!window.autocomplite_items && this.value.length >= 2) {
                    var alias = this
                    $.get('https://ufsa.com.ua/ufsa/autocomplete.php?b&term=' + this.value , {} , function(tpl) {
                        try {
                            var obj = eval('(' + tpl + ')');
                            $(alias).next().val(obj[0].id)
                        } catch(e) {
                            console.debug(e)
                        }
                    })
                }
            }
        });
    });
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <br>
  <br>
  
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <input type="text" name="from" id="from" class="form-control js-autocomplete" placeholder="Откуда">
      </div>
    </div>

    <div class="col-md-6">
      <div class="form-group">
        <input type="text" name="to" id="to" class="form-control js-autocomplete" placeholder="Куда">
      </div>
    </div>
  </div>
</div>

Использую jquery ui autocomplete и json файл с др. сайта.

Задача, при фокусе на поле должны высвечиваться варианты аэропортов - город + код аэропорта (например как тут - *не реклама, исключительно как пример).

Вопрос: Как реализовать автокомплит городов с аэропортами, возможно, есть международными и общедоступный jsonp файл с подобными данными? Что для php нужно?

И как реализовать несовпадение откуда и куда (при вводе города откуда, чтобы в куда уже он не высвечивался)?

P.S: И если в дальнейшем планируется интеграция в Wordpress, возможно, есть готовые плагины\виджеты для реализации подобного?

1 ответ 1

5
+150

возможно, есть международными и общедоступный jsonp файл с подобными данными?

Есть сервисы, которые предоставляют API поиска по аэропортам (например, https://developer.flightstats.com/api-docs/airports/v1), но по очевидным причинам, они платные и при определённой нагрузке это может стать не выгодно.

Беглый поиск по GitHub выдаёт два репозитория с аэропортами, самый популярный обновлялся в 2015 году, другой — совсем недавно, хоть и создан в 2014, что добавляет трастовости: https://github.com/mwgg/Airports

Данные можно получать скриптом (самое простое — git pull-ить репозиторий), а затем конвертировать результаты в какую-либо бд для более быстрого поиска.

Задача, при фокусе на поле должны высвечиваться варианты аэропортов - город + код аэропорта (например как тут - *не реклама, исключительно как пример).

В вашем примере данные начинают возвращаться только при вводе двух символов, просто выпадайка с аэропортами будет изначально добавляться к весу страницы (например, json в репозитории, который я привёл выше, весит 8.9 мегабайт)

Что для php нужно?

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

Сама реализация сильно зависит от нагрузки и инструментов (например, фреймворка), которые вы выберете. В целом, это же справедливо для инструментов на фронтенде, т. к., например, jquery ui тянет за собой много зависимостей (js, css), которые могут оказаться лишними.

И как реализовать несовпадение откуда и куда (при вводе города откуда, чтобы в куда уже он не высвечивался)?

Для этого достаточно при отправке запроса из второго select на бекенд передавать код уже найденного в первом селекте аэропорта. При определённом допущении, код для получения списка аэропортов может быть одинаковым и в него будут передаваться текущие значения обоих select.

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

Если потребуются какие-то уточнения — пишите, я обновлю ответ.

2
  • Я приношу извинения, конкурс заканчивается, но я не могу Ваш ответ отметить решением, как и отдать за него баллы, потому как не вижу конкретики! Только общая идея. Что-то нашла более существенное gabrieleromanato.name/… , правда, автокомплит по поиску и еще не было времени проверить, но хотя бы есть наглядный код с php. В любом случае, огромное спасибо за старания! Плюсик уже поставила!)
    – SVE
    16 авг 2018 в 13:37
  • 1
    С конкретикой на WP всё равно бы не помог, а писать что-то абстрактное, не привязанное к WP — вам бы не пригодилось. В любом случае, интересно было копнуть тему с кодами аэропортов, так что всё ок :) 16 авг 2018 в 13:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.