Question

我正在使用 http://jqueryui.com/autocomplete/#remote-jsonp

用我宁静的春天mvc进行即时搜索，但没有任何反应。

这是我的代码：

 <!doctype html>
 <html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.ui-autocomplete-loading {
 background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
   #test {
            width: 25em;
        }
  </style>
 <script>
        $(function() {
            function log(message) {
                $("<div>").text(message).prependTo("#log");
                $("#log").scrollTop(0);
            }


            $("#test").autocomplete({
                source : function(request, response) {
                    $.ajax({
                        url : "http://rest/user/allusers",
                        dataType : "jsonp",
                        data : {
                            featureClass : "P",
                            style : "full",
                            maxRows : 12,
                            name_startsWith : request.term
                        },
                        success : function(data) {
                            response($.map(data.user, function(item) {
                                return {
                                    label : item.firstname + ", " + item.lastname,
                                    value : item.firstname
                                };
                            }));
                        }
                    });
                },
                minLength : 2,
                select : function(event, ui) {
                    log(ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value);
                },
                open : function() {
                    $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                },
                close : function() {
                    $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                }
            });
        });
 </script>
 </head>
 <body>
       <div class="ui-widget">
            <label for="test">Your test: </label>
        <input id="test" />

    </div>
    <div class="ui-widget" style="margin-top: 2em; font-family: Arial;">
        Result:
        <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
    </div>

从网址输出的json是：

{

"user": [
    {
        "userid": "5",
        "firstname": "jesica",
        "lastname": "biel",
        "username": "jesica",
        "password": "biel",
        "email": "jesica@biel.com",
        "isEnabled": "true",
        "address": {
            "street": "LA 80",
            "zipcode": "666 666",
            "city": "LOS Angeles"
        },
        "roles": {
            "roleid": "5",
            "rolename": "ROLE_USER"
        }
    }


]
}

有什么问题？为什么我无法在自动填充字段中获得任何建议？

Answer 1

解决

问题是：dataType：“jsonp”。它必须是dataType：“json”。

谢谢大家。

Answer 2

除了Irvin的评论之外，请尝试将您的数据（或警报）放入成功函数中，以查看是否正确触发：

success: function( data ) {
        var test = eval('({"user": [    {        "userid": "5",        "firstname": "jesica",        "lastname": "biel",        "username": "jesica",        "password": "biel",        "email": "jesica@biel.com",        "isEnabled": "true",        "address": {            "street": "LA 80",            "zipcode": "666 666",            "city": "LOS Angeles"        },        "roles": {            "roleid": "5",            "rolename": "ROLE_USER"        }    }]} )');

        response( $.map( test.user, function( item ) {
          return {
                                label : item.firstname + ", " + item.lastname,
                                value : item.firstname
                            };
        }));
      }

使用ajax和jquery自动完成功能无效

2 个答案: