jQuery Forum

Marc,

Dear Dave,

thanks for your help - the direction we assumed and you also pointed us to was correct. The problem was caused by wrong array format - correct json but still wrong for autocomplete - seems like the autocomplete needs very specific format. Now it works your text makes also more sense ;-)
From what we found it's like this - maybe can help others to understand the requirements better:

We found 2 options to work with different requirements for the returned data format:

Version1:

Autocomplete:
$("#city").autocomplete({
        source: "/controller/format/json"});

Data Format:
[{"value":"Test1","label":"Test1"},{"value":"Test2","label":"Test2"}]
Here you can leave out label - like dave pointed out.

Version 2:

Autocomplete:
  $("#city").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "/controller/format/json",
                data: {
                    q: request.term
                },
                success: function(data) {
                    response(data.names)
                }
            })
        }}});

Data Format:
["Test1","Test2"]

So thanks again dave and everyone for a great product!

This seems to have gotten me alittle closer, but I'm still having the problem where it doesn't display the drop down and loading icon just sits.  It works when the data is local, but not when making request via server.

I've verified via firebug that the json file was retrieved successfully, and verified that what was returned is valid json.

Here is my client code:

1. $('#provider').autocomplete({
               minLength: 2,
               source: function(request, response) {
                   $.getJSON("server.php", {
                       term: request.term
                   }),
                   response
                  
               },
               focus: function(event, ui) {
                   $('#provider').val(ui.item.label);
                  
                   return false;
               },
               select: function(event, ui) {
                   $('#provider').val(ui.item.label);
                   $('#provider-id').val(ui.item.id);
                   $('#provider-phone').html(ui.item.phone );
                   $('#provider-state').html(ui.item.stateselected );
                   $('#provider-location').html(ui.item.city + " - " + ui.item.state );
                   $('#provider-policy-link').attr( 'href', ui.item.policy );
                   $('#provider-credentialing-link').attr( 'href', ui.item.credentialing );
                   $('#provider-icon').attr('src', '../images/' + ui.item.icon);
                                 
                   return false;
               }
   
              
           })
           .data( "autocomplete" )._renderItem = function( ul, item ) {
               return $( "<li></li>" )
                   .data( "item.autocomplete", item )
                   .append( "<a>" + item.label + "<br>" + item.city + " - " + item.state + "</a>" )
                   .appendTo( ul );
           };

And here is the json text being returned:

1. [
       {
           "value": "jquery",
           "label": "jQuery",
           "desc": "the write less, do more, JavaScript library",
           "icon": "jquery_32x32.png"
       },
       {
           "value": "jquery-ui",
           "label": "jQuery UI",
           "desc": "the official user interface library for jQuery",
           "icon": "jqueryui_32x32.png"
       },
       {
           "value": "sizzlejs",
           "label": "Sizzle JS",
           "desc": "a pure-JavaScript CSS selector engine",
           "icon": "sizzlejs_32x32.png"
       }
   ]

This is essentially the demo for Custom Data and Display, but instead of using the data locally, it's getting from remote.

What am I missing?

 Almost a year later and this is still broken. It works fine with an array or a callback function, but the remote data source option won't work at all (jQueryUI 1.8.9).

can you supply the code you are working with? the above code actually has logic errors which is the reasoning behind it not working.

-- Kevin

I also had trouble making the autocomplete function work with remote data. The request was fired, data in correct JSON format was served, but no dropdown.
In my test I used a local html/js file and a servlet on my appserver. Finally I was pointed at a cross scripting exception in the Jquery code using Firefly. Ok: the html/js page and the servlet must be served from the same server. As soon as I moved my htmal page to the server, the autocomplete worked.