0

есть

window.onload=function(){
    var originAirport = $( "#origin" ),
        destinationAirport = $( "#destination");

    function init() {
        lookupAirports().then(function( data ) {
            originAirport.add( destinationAirport )
                .autocomplete({
                    source: data.airports,
                    minLength: 2
                });
        });
    }

    function lookupAirports() {
        return $.getJSON( "/api/v1/airports.json" )
    }

    init();
};

есть json

   {
        "airports": [
            { "name": "Aalborg, Denmark", "iata": "AAL" },
            { "name": "Aalesund, Norway", "iata": "AES" },
            { "name": "Zugapa, Indonesia", "iata": "UGU" },
            { "name": "Zurich, Switzerland", "iata": "ZRH" }
        ]
    }

JS требует наличие в json полей label и value, как сделать что-бы вместо label был name, а вместо value был iata?

Сделал так:

function init() {
        lookupAirports().then(function( data ) {
            originAirport.add( destinationAirport )
                .autocomplete({
                    source: function(request, response) {
                        response($.map(data.airports, function(airport) {
                            return {
                                label: airport.name + " " + "(" + airport.iata + ")",
                                value: airport.iata
                            }
                        }))
                    },
                    minLength: 2
                });
        });
    }

В все нормально находит аэропорты, но постоянно показывает весь список аэропортов, а хотелось бы отсеивать аэропорты которые не попадают под введенное значение, то есть если я в поле ввел AAL, оно должно показать только те аэропорты которые содержать в названии AAL(Aalborg и Aalesund), если я введу AALE(то должно оставить только Aalesund, а остальные аэропорты должны пропасть) а мне при таком воде показывает абсолютно все аэропорты из JSON

HTML

<div class="seccio" id="schedule">
  <div class="activebox" id="schedule-panel">
    <div class="activebox-header">
      <div class="cols2">
        <div class="col1">
          Schedule
        </div>
        <div class="col2 info">
          Schedules for next 25 days only
        </div>
      </div>
    </div>
    <div class="activebox-content">
      <div class="cols2">
        <div class="col1">
          <div class="form-element">
            <input type="text" name="origin" id="origin" placeholder="Origin" />
          </div>
          <div class="form-element">
            <input type="text" name="departure" id="departure" placeholder="02/19/2016" />
          </div>
        </div>
        <div class="col2">
          <div class="form-element">
            <input type="text" name="destination" id="destination" placeholder="Destination" />
          </div>
          <div class="form-element">
            <input type="text" name="arrival" id="arrival" placeholder="02/19/2016" />
          </div>
        </div>
        <div class="col2">
          <div class="form-element">
            <input type="submit" name="schedule-submit" value="Get Schedule" id="schedule-submit" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
1
  • полный код с html и желательно вставить кодом сюда или на кодепен. 19 фев 2016 в 12:53

1 ответ 1

1

Параметр, передаваемый в response - это уже отфильтрованный список, который будет показываться пользователю. Так как сейчас передается полный список, то и показывается он весь.

Для фильтрации можно использовать метод filter, строка, которую ввел пользователь, передается в объекте request, в поле term.

Таким образом свойство source можно заполнить так:

source: function(request, response) {
    var filtered = data.airports.filter(function(airport){
        return airport.name.indexOf(request.term) == 0;//Название начинается с введенных символов, 

        //для более общего решения, не зависимого от регистра ввода можно использовать функции toLowerCase
        //return airport.name.toLowerCase().indexOf(request.term.toLowerCase()) == 0;

        // для поиска по всему названию
        //return airport.name.toLowerCase().indexOf(request.term.toLowerCase()) > -1;
    })
    response(filtered.map(function(airport) {
        return {
            label: airport.name + " " + "(" + airport.iata + ")",
            value: airport.iata
        }
   }))
},
8
  • что-то не то, вообще не находит аэропорты, но в какую сторону копать я в принципе понял, спасибо 20 фев 2016 в 11:28
  • @МихаилЛуцко, если именно не находит - проверяйте условие которое выполняется, если ошибка в консоли - нужно смотреть ошибку. Сейчас (не за комментированная часть) ищется именно названия которые начинаются с введенной строки, То есть найдется: a -> ala, ale, но не Ala, Ale
    – Grundy
    20 фев 2016 в 11:31
  • Да действительно, но мне нужны любые подходящие совпадения, даже если То есть js -> JS, js, jS, Js, blabla_JS, blabla_JS_blabla и т.д. я прошу прощения если пишу какую-то чушь, для меня это сложно так как я JS только начинаю осваивать 20 фев 2016 в 12:00
  • @МихаилЛуцко, почитайте комментарий к строке c return
    – Grundy
    20 фев 2016 в 12:09
  • @МихаилЛуцко, добавил различные варианты return c комментариями, используйте тот который нужен
    – Grundy
    20 фев 2016 в 12:10

Ваш ответ

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

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