CODEWITHSUNDEEP
jqueryjquery-uiautocompletejquery-autocompletejquery-ui-autocomplete
jQuerybeast
jQuerybeast

Reputation: 14490

jQuery Autocomplete Plugin to jQuery UI autocomplete

I have a simple wikipedia autocomplete using the wikipedia's API.

Currently it is working using the jQuery autocomplete Plugin and I want to make it using jQuery UI.

Can someone guide me through please?

Here is the fiddle of a working demo using the plugin: http://jsfiddle.net/VjLnv/

And here is the JS:

function attachWikiAutoComplete(expression) {
    $("#artist").autocomplete("http://en.wikipedia.org/w/api.php",  {
        dataType: "jsonp", 
        parse: function(data) { 
            var rows = new Array(); 
            var matches = data[1];
            for( var i = 0; i < matches.length; i++){ 
                rows[i] = { data:matches[i], value:matches[i], result:matches[i] }; 
            } 
            return rows;
        },
        formatItem: function(row) { return row; }, 
        extraParams: {
            action: "opensearch", 
            format: "json", 
            search: function () { return $("#artist").val() } }, 
        max: 10 
    });
}

Thanks alot

Upvotes: 2

Views: 2269

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

This is the equivalent code in jQueryUI autocomplete:

$("#artist").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "http://en.wikipedia.org/w/api.php",
            dataType: "jsonp",
            data: {
                'action': "opensearch",
                'format': "json",
                'search': request.term
            },
            success: function(data) {
                response(data[1]);
            }
        });
    }
});

Working Example: http://jsfiddle.net/UGYzW/2/

Upvotes: 8

Related Questions