自动完成jquery.get json没有完成

Question

我在自动完成时遇到了麻烦，使用了JSON数据。 我从回调中获得正确的回复，但自动完成功能无法正常工作。例如，当我键入“经度”我得到这样的响应：

[{\"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\"}] 

但我的自动完成功能，只是增加朗维尤和长岛。 棘手的是，在我继续输入“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一次，为您的输入字段提供一个允许自动完成的完整机制 - 它将负责处理“关键”事件。

要达到您的需要，您应该使用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(); 
       } 
      });