2013-08-08 2 views
0

Я использую type-head для twitter-bootstrap, чтобы выполнить автозаполнение в поле ввода.Обработка возврата из ajax-вызова

То, что я до сих пор:

$(".airportSearch").typeahead({ 
    source: function(typeahead, query) { 
     $.ajax({ 
      url: url_, 
      dataType: "json", 
      data: { 
       n: 12, 
       q: typeahead 
      }, 
      success: function(data) { 
       var return_list = [], i = data.length; 
       while(i--) { 
        return_list[i] = { 
         type: data[i].type, 
         id: data[i].iata, 
         value: data[i].city, 
         returnvalue: data[i].type == 'city' ? data[i].city + ' [' + data[i].iata + ']' : 
          data[i].city + ' (' + data[i].iata + ')' 
        }; 
       } 

      } 
     }); 
    } 
}); 

пример вывод:

[{"type":"airport","city":"Quebec","airport":"Quebec","iata":"YQB","country":"Canada","locationId":"airport_YQB"}, 
{"type":"airport","city":"Queenstown","airport":"Queenstown","iata":"ZQN","country":"New Zealand","locationId":"airport_ZQN"}, 
{"type":"city","city":"Setif","airport":"All Airports","iata":"QSF","country":"Algeria","locationId":"DZ_city_QSF"}, 
{"type":"airport","city":"Setif","airport":"Setif","iata":"QSF","country":"Algeria","locationId":"airport_QSF"}, 
{"type":"airport","city":"QachaS Nek","airport":"QachaS Nek","iata":"UNE","country":"Lesotho","locationId":"airport_UNE"}, 
{"type":"airport","city":"Qaisumah","airport":"Qaisumah","iata":"AQI","country":"Saudi Arabia","locationId":"airport_AQI"}] 

Я вошел в return_list переменного, которую я создаю и подтвердил, что ожидаемый список объектов, у меня есть создано. Я хочу заполнить параметры автозаполнения строками returnvalue в списке объектов.

Может ли кто-нибудь сказать мне, как, или указать мне куда-нибудь, что говорит мне, как?

ответ

1

Попробуйте это:

$(".airportSearch").typeahead({ 
    source: function(typeahead, process) { 
     return $.ajax({ // return ajax result 
      url: url_, 
      dataType: "json", 
      data: { 
       n: 12, 
       q: typeahead 
      }, 
      success: function(data) { 
       var return_list = [], i = data.length, data_vals = []; // add data_vals array for typeahead 
       while(i--) { 
        return_list[i] = { 
         type: data[i].type, 
         id: data[i].iata, 
         value: data[i].city, 
         returnvalue: data[i].type == 'city' ? data[i].city + ' [' + data[i].iata + ']' : 
          data[i].city + ' (' + data[i].iata + ')' 
        }; 

        data_vals.push(return_list[i].returnvalue); // populate the needed values 
       } 
       return process(data_vals); // and return to typeahead 
      } 
     }); 
    } 
}); 

Обычно я бы заселить data_vals для машинописный только, но вы сделали это ваш путь к вашей причине, я думаю.

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

+0

Спасибо Hieu, я не совсем уверен, как работает ajax-вызов (не нашли хорошего объяснения в Интернете), поэтому я не совсем уверен, что происходит. Будет ли это обрабатывать данные, возвращаемые вызовом? (Я включил пример в OP) Кроме того, я предполагаю, что вы имели в виду «запрос возврата (data_vals)»; а не «процесс возврата (data_vals)», потому что, когда я использую «процесс», журналы консоли «Uncaught ReferenceError: process не определены» – Skytiger

+1

ah right, я не заметил, что вы используете разные параметры для обратного вызова 'source'. Обычно я бы использовал 'source: function (query, process) {'. И да, это ответ на вызов AJAX. –

+0

Я думаю, что это сделал трюк! Благодаря тонну! – Skytiger

Смежные вопросы