CODEWITHSUNDEEP
jqueryajaxautocomplete
user1067665
user1067665

Reputation: 495

autocomplete with ajax and jquery is not working

I'm using http://jqueryui.com/autocomplete/#remote-jsonp

with my restful spring mvc for an instant search but nothing happens.

Here is my code :

 <!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>

and the json out put from the url is:

{

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


]
}

What is the problem? why can't I get any suggestion in the Autocomplete field?..

Upvotes: 2

Views: 4524

Answers (2)

user1067665
user1067665

Reputation: 495

Solved

The problem was: dataType : "jsonp". It must be dataType : "json".

Thanks everybody.

Upvotes: 2

jaybro
jaybro

Reputation: 1543

In addition to Irvin's comment, Try putting your data (or an alert) in your success function to see if that is firing correctly:

success: function( data ) {
        var test = eval('({"user": [    {        "userid": "5",        "firstname": "jesica",        "lastname": "biel",        "username": "jesica",        "password": "biel",        "email": "[email protected]",        "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
                            };
        }));
      }

Upvotes: 0

Related Questions