Заказ билетов с использованием jquery ui autocomplete

#php #jquery #json #jquery_ui

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



$('.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)
                        }
                    })
                }
            }
        });
    });







  

  

  

  

    

      

        
      
    

    

      

        
      
    
  





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

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

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

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

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

Ответы

Ответ 1

возможно, есть международными и общедоступный 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.

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

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