CODEWITHSUNDEEP
javascriptjqueryjsonjquery-ui-autocomplete
Jaanus
Jaanus

Reputation: 16541

jQuery UI not autocompleting from JSON

When I look the response from Chrome Developer Tools I see this:

[{
"summary": "foo",
"key": "myKey"
}]

My javascript(UPDATED):

jquery183(function() { 
jquery183( "#city" ).autocomplete({
    source: function( request, response ) {
        jquery183.ajax({
            url: '/servlet/ajax/',
            dataType: "jsonp",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: request.term
            },
            success: function( data ) {
                response( jquery183.map( data, function( issue ) {
                    return {
                        label: issue.summary + ", " + issue.key,
                        value: issue.summary
                    }
                }));
            }
        });
    },
    minLength: 2,
    open: function() {
        jquery183( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
    },
    close: function() {
        jquery183( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
    }
});

});

HTML:

 <div class="ui-widget">
    <label for="city">Your city: </label>
    <input id="city" />
    Powered by <a href="http://geonames.org">geonames.org</a>
 </div>

I thought this should work, but it does not suggest any autocomplete items. Any suggestions?

If more code needed, feel free to ask.

Upvotes: 0

Views: 440

Answers (3)

Jaanus
Jaanus

Reputation: 16541

Found answer from here:

Ajax success event not working

The result is probably not in JSON format, so when jQuery tries to parse it as such, it fails. You can catch the error with error: callback function.

You don't seem to need JSON in that function anyways, so you can also take out the dataType: 'json' row.

Upvotes: 0

Thijs Kramer
Thijs Kramer

Reputation: 1117

As seen on: http://jqueryui.com/autocomplete/#remote-jsonp

You forgot to copy/paste the ajax call to retrieve your data. 

$( "#city" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "http://ws.geonames.org/searchJSON",
          dataType: "jsonp",
          success: function( data ) {
            response( $.map( data.geonames, function( item ) {
              return {
                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                value: item.name
              }
            }));
          }
        });
      }
});

Upvotes: 1

TechSpellBound
TechSpellBound

Reputation: 2555

I am not sure but is there a problem with <input id="city" />. It should probably be <input id="city" type="text"/>

Upvotes: 0

Related Questions