автозаполнение jquery.get json не заполняется

Question

У меня возникли проблемы с автозаполнением, usign данные JSON. Я получаю правильный ответ от обратного вызова, но автозаполнение работает неправильно. Например, когда я типа «Lon» Я получаю ответ:

[{\"value\":\"Dijon, (DIJ)\",\"code\":\"DIJ\"},{\"value\":\"Longview, (GGG)\",\"code\":\"GGG\"},{\"value\":\"Long Island, (HAP)\",\"code\":\"HAP\"},{\"value\":\"Islip, (ISP)\",\"code\":\"ISP\"},{\"value\":\"Long Banga, (LBP)\",\"code\":\"LBP\"},{\"value\":\"Londrina, (LDB)\",\"code\":\"LDB\"},{\"value\":\"Londonderry, (LDY)\",\"code\":\"LDY\"},{\"value\":\"Long Beach, (LGB)\",\"code\":\"LGB\"},{\"value\":\"Long Lellang, (LGL)\",\"code\":\"LGL\"},{\"value\":\"Long Akah, (LKH)\",\"code\":\"LKH\"},{\"value\":\"Londra, (All airports - LON)\",\"code\":\"LON\"},{\"value\":\" - Londra, Gatwick Arpt (LGW)\",\"code\":\"LGW\"},{\"value\":\" - Londra, London City Arpt (LCY)\",\"code\":\"LCY\"},{\"value\":\" - Londra, Stansted Arpt (STN)\",\"code\":\"STN\"},{\"value\":\" - Londra, London Biggin Hill Arpt (BQH)\",\"code\":\"BQH\"},{\"value\":\" - Londra, Heathrow (LHR)\",\"code\":\"LHR\"}] 

Но мой автозаполнения просто добавляет Longview и Лонг-Айленд. Трудность в том, что после того, как я продолжаю печатать «Lond», автозаполнение работает отлично, я удаляю «d», автозаполнение работает отлично, оно завершает все данные сверху.

Где я ошибаюсь ...? Вот мой код:

$("#destination2").keyup(function(){ 
    var term = $("#destination2").val(); 
    //var query_type = $("#form_type").val(); 

    jQuery.get('http://online.bileteavion.com.ro/q_travel_online_api/misc/hotels.autocomplete.php?query_type=flight&term='+term, function(data) { 

        data = eval('['+data.responseText.split('[')[1].split(']')[0]+']'); 
        var source = $.map(data, function(item) { 
        return { 
         label: item.value, 
         value: item.value, 
         id: item.id, 
         iata: item.iata 
          } 
        }); 

        $("#destination2").autocomplete({ 
         source: source, 
         minLength: 3, 
         search: function(event, ui) { 
          $('#loading-spinner').show(); 
           }, 
         change: function(event, ui) { 
          //console.log(ui.item); 
          if(!ui.item) { 
           $(this).val(""); 
           $("input[name='cityId']").val(""); 
           $("input[name='destinationIataCode']").val(""); 
           $("input[name='destination']").val(""); 

          } 
         }, 
         open: function() { 
           $('#loading-spinner').hide(); 
         }, 
         select: function(event, ui) { 
          $("input[name='cityId']").val(ui.item.id); 
          $("input[name='destinationIataCode']").val(ui.item.iata); 
          $("input[name='destination']").val(ui.item.value); 
          $(this).blur(); 
         } 
       }); 

       } 
    ); 

    }); 

Answer 1

jquery.autocomplete не функция, вызываемая каждый раз, когда вы хотите, чтобы отобразить диалоговое окно автозавершения.

Вы должны позвонить jquery.autocomplete только один раз во время инициализации, чтобы снабдить ваше поле ввода полным механизмом, который позволяет автозаполнение - и которое позаботится о событии «keyup».

Для достижения нужных вам нужно использовать обратный вызов с опцией source.

Вот как:

Вместо:

$("#destination2").keyup(function(){ 
    ... 
    jquery.get(<url>, function(data){ 
      var source = ... 

      $("#destination2").autocomplete({ 
      source: source 
      minLength: ... 
      search: ... 
      open: ... 
      select: ... 
      }) 
    }) 
}) 

Вы должны написать:

$("#destination2").autocomplete({ 
    source: function(request, response){ 
     //request is an obj containing infos on what is typed 
     //response is a callback, which should be called if you want to display hints 
     jQuery.get(url + request.term, function(data){ 
      var source = ... 
      response(source); 
     }) 
    } 
    minLength: ... 
    search: ... 
    open: ... 
    select: ... 
}) 

Вы должны проверить Remote JSONP datasource из документации.

Answer 2

Я использую это на своем сайте. Хорошо работает.

$("#id").autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         url: 'http://online.bileteavion.com.ro/q_travel_online_api/misc/hotels.autocomplete.php', 
         dataType: "json", 
         data: { 
          //values to pass to server. in your case: query_type & term 
          term: request.term, 
          query_type: 'flight' 
         }, 
         success: function (data) { 
          response($.map(eval(data), function (item) { 
           return { 
             //map values as you previously did 
             label: item.value, 
             value: item.value, 
             id: item.id, 
             iata: item.iata 
           } 
          }) 
          ); 
         } 
        }) 
       }, 
       minLength: 3, 
       search: function(event, ui) { 
        $('#loading-spinner').show(); 
       }, 
       change: function(event, ui) { 
        //console.log(ui.item); 
        if(!ui.item) { 
         $(this).val(""); 
         $("input[name='cityId']").val(""); 
         $("input[name='destinationIataCode']").val(""); 
         $("input[name='destination']").val(""); 
        } 
       }, 
       open: function() { 
         $('#loading-spinner').hide(); 
       }, 
       select: function(event, ui) { 
        $("input[name='cityId']").val(ui.item.id); 
        $("input[name='destinationIataCode']").val(ui.item.iata); 
        $("input[name='destination']").val(ui.item.value); 
        $(this).blur(); 
       } 
      });