Jquery Autocomplete doesn't work

Question

i'm trying to add an autocomplete to an input box (i'm in asp.net/vb.net project) with the autocomplete source from a database. So i've created a webservice and i did an ajax call:

<script type="text/javascript">
            $(document).ready(function () {

                $('#modelloInput').autocomplete({

                    source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "WebServices/AutocompleteWS.asmx/getTuttiIModelli",
                            data: "{'prefix':'" + request.term + "'}",
                            dataType: "json",
                            async: true,
                            success: function (data) {
                                response(data.d);
                            },
                            error: function (result) {
                                //alert("Error");
                            }
                        });
                    }

                });
            }); 
</script>

<input type=text  id="modelloInput" />

Now when i run the application and i write something in the inputbox i got the entire list in the autocomplete box. I can write everything but i get always the entire list of elements.

Why?

Answer 1

I think there must be some issue in your web-service code,

you can use this basic code for autoComplete,

$( "input.suggest-user" ).autocomplete({
  source: function( request, response ) {

    $.ajax({
        dataType: "json",
        type : 'Get',
        url: 'yourURL',
        success: function(data) {
          $('input.suggest-user').removeClass('ui-autocomplete-loading');  // hide loading image

        response( $.map( data, function(item) {
            // your operation on data
        }));
      },
      error: function(data) {
          $('input.suggest-user').removeClass('ui-autocomplete-loading');  
      }
    });
  },
  minLength: 3,
  open: function() {

  },
  close: function() {

  },
  focus:function(event,ui) {

  },
  select: function( event, ui ) {

  }
});

OR

$("#id").autocomplete(
{
search: function () {},
source: function (request, response)
{
    $.ajax(
    {
        url: ,
        dataType: "json",
        data:
        {
            term: request.term,
        },
        success: function (data)
        {
            response(data);
        }
    });
},
minLength: 2,
select: function (event, ui)
{
    var test = ui.item ? ui.item.id : 0;
    if (test > 0)
    {}
}
});