1

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とLongIslandを追加するだけです。トリッキーなことは、「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();
                        }
                }); 

                }
    );

    });
4

2 に答える 2

2

jquery.autocompleteオートコンプリートダイアログを表示するたびに呼び出す関数ではありません。

jquery.autocomplete自動完了を可能にし、「キーアップ」イベントを処理する完全なメカニズムを入力フィールドに装備するには、初期化中に1回だけ呼び出す必要があります。

必要なことを実現するには、オプション付きのコールバックを使用する必要があり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: ...
})

ドキュメントからリモートJSONPデータソースを確認する必要があります。

于 2012-07-03T09:45:56.897 に答える
0

私は自分のサイトでこれを使用しています。非常にうまく機能します。

 $("#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();
                }
            });
于 2012-07-03T12:45:28.010 に答える