Question

我遇到自动填充问题，使用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和Long Island。棘手的是，在我输入“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();
                }
            });

自动完成jquery.get json无法完成

2 个答案: