Question

我当前的json响应就像

{"airportname":"HAL BANGALORE","icaocode":"VOBG","airportInfo":"HAL Bangalore Airport"}

当我搜索“VOBG”时，它应显示HAL BANGALORE, HAL Bangalore Airport,VOBG。

Jquery代码：

 $(document).ready(function(){
            $("#srch-term").autocomplete({
                minLength : 3,              
                source : function(request, response) {
                var url =  "http://privateflight.in:8080/RestWebServices/airports/airportsearch?searchKey=" + $('#srch-term').val();
                    $.ajax({
                        url : url,
                        data: '', 
                        type : "GET",
                        dataType : "json",
                        contentType: "application/json; charset=utf-8",
                        success : function(data) {
                        var code=[];
                        var air=[];
                         $.each( data, function( i, item ) {

                         //alert(data[i]['icaocode']);
                         code[i]=data[i]['icaocode'];
                         air[i]=data[i]['airportname'];
                         // alert(code[i]);
                        // alert(i);
                            //data[t].icaocode
                        //console.log(JSON.stringify(data));
                        //alert(JSON.stringify(data));
                        //alert(item);
                        //response(code[i]);
                        response($.map(data,function(item){
                        //alert('success');
                                    return {
                                        //label: item.AccentCity,
                                        value: item.airportname,
                                        label: item.icaocode
                                        //label: item.airportInfo
                                    }
                                }));
                          });



                        },error: function(xhr, textStatus) {
        alert('error'); 
    }
                    });
                }
            });
    });

HTML：

 <input type="text" class="form-control" placeholder="Search" name="srch-term" style="text-transform: uppercase;" id="srch-term">

我如何才能取得成果？

Answer 1

主要变化是

  response($.map(data, function (item) {
                                return {
                                    value: item.airportname,
                                    label: item.airportname + ", " + item.airportInfo + ", " + item.icaocode
                                }
                            }));

以下是您需要的完整版本。

＆＃13;

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <style>
        #srch-term {
            width: 25em;
        }
    </style>
    <script>
        $(document).ready(function () {
            function log(message) {
                $("<div>").text(message).prependTo("#log");
                $("#log").scrollTop(0);
            }

            $("#srch-term").autocomplete({
                minLength: 3,
                source: function (request, response) {
                    $.ajax({
                        url: "http://privateflight.in:8080/RestWebServices/airports/airportsearch",
                        data: {
                            searchKey: $('#srch-term').val()
                        },
                        type: "GET",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    value: item.airportname,
                                    label: item.airportname + ", " + item.airportInfo + ", " + item.icaocode
                                }
                            }));
                        },
                        error: function (xhr, textStatus) {
                            alert('error');
                        }
                    });
                },
                select: function (event, ui) {
                    log(ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value);
                }
            });
        });
    </script>
</head>
<body>
    <div class="ui-widget">
        <label for="srch-term">Airport: </label>
        <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"/>
    </div>

    <div class="ui-widget" style="margin-top:2em; font-family:Arial">
        Selected:
        <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
    </div>
</body>
</html>

＆＃13;

AJAX自动完成响应格式

1 个答案: