CODEWITHSUNDEEP
jqueryjsonajaxjquery-ui
Enzio
Enzio

Reputation: 387

jQuery UI Autocomplete not showing AJAX results

I'm trying to build an autocomplete form which will load JSON from an external database (which returns JSON) on user input. My code seems to work properly as it will log an array containing multiple JSON objects. However, jQuery UI does not show the results on the page itself.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tables</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>

    <div class="ui-widget">
        <input type="text" id="tags" />
    </div>

    <script src="assets/js/script.js"></script>
</body>
</html>

JS

$(document).ready(function(){
    function createUrl(input){
        var url = "http://forums.zybez.net/runescape-2007-prices/api/" + input;
        return url;
    }

    function getSource(input){
        var input = input.term;
        var url = createUrl(input);

        $.getJSON(url, function(data){
            var items = [];

            $.each( data, function(key, val){
                items.push(val);
            });

            console.log(items); // Shows correct results

            return items;
        });     
    }

    $("#tags").autocomplete({
        minLength: 2,
        source: getSource
    });
});

What can be the problem? Thanks in regards.

Upvotes: 0

Views: 2399

Answers (3)

Mehmet Recep Yildiz
Mehmet Recep Yildiz

Reputation: 2137

When you set the source of autocomplete like this:

$("#btnArtist").autocomplete({ source: "/Ajax/Home/AutoCompleteData" });

You can see the returned JSON data from the server in the Console, but it won't show the results.

Changing URL to Ajax object fixed my problem. Here is the working code:

$("#btnArtist").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Ajax/Home/AutoCompleteData",
            data: {
                term: request.term
            }
        }).done(function (data) {
            response(data);
        });
    }
})

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

try:

 $("#tags").autocomplete({
        minLength: 2,
        source: function( request, response ) {
            $.getJSON("http://forums.zybez.net/runescape-2007-prices/api/"+request.term, function(data){
            var items = [];

            $.each( data, function(key, val){
                items.push(val);
            });

            console.log(items); // Shows correct results
            response(items);
        });     
      }
    });

see: http://jsfiddle.net/4g3818rr/

Upvotes: 2

Enzio
Enzio

Reputation: 387

Thanks to Madalin's answer and O.A.'s comment I found the solution:

function createUrl(input){
    var url = "http://forums.zybez.net/runescape-2007-prices/api/" + input;
    return url;
}

$("#tags").autocomplete({
    minLength: 2,
    source: function( request, response ) {
        var term = this.term;
        var url = createUrl(term);

        $.getJSON(url, function(data){
            var items = [];

            $.each( data, function(key, val){
                items.push(val);
            });

            response(items);
        });     
    }
});

Upvotes: 0

Related Questions