jquery autocomplete with ajax and multiple categories not working

Question

I am trying to makeout the jquery autocomplete http://jqueryui.com/autocomplete/#remote-jsonp with the remote json, as well as the categories http://jqueryui.com/autocomplete/#categories .

The remote json is not working in the jquery example. I get the loading spinner indefinitely. Is something wrong ?

How do we combine the remote json with category ? I have tried to do but am unsucessful. The example is by itself not working.

Answer 1

The jQuery UI example

The Remote JSONP datasource autocomplete example is not working, certainly because the geonames.org webservice has changed since this example has been written.

Perform a GET request to http://ws.geonames.org/searchJSON and you will get a json containing the following message:

Please add a username to each call in order for geonames to be able to identify the calling application and count the credits usage.

When this example was written, anonymous call were probably accepted which is no more the case.

Autocomplete : remote source + categories

Just combine the 2 jquery ui examples:

// 1. Extends the jquery ui autocomplete widget to manage categories

$.widget("custom.catAutocomplete", $.ui.autocomplete, {
    _renderMenu: function(ul, items) { ... }
}

// 2. Then initialize your widget using a remote 
// data source and define each item category

$(...).catAutocomplete({
    source: function(request, response) {
        $.ajax({
            url: '...',
            success: function(data) {
                response($.map(data.data, function(item) {
                    return {
                        value: item.value,
                        label: item.label,
                        category: item.category
                    }
                }));
             }
          }
       }
});

I wrote this jsFiddle as an example. It retrieves Github repositories of the requested user and list them grouped by forks count.