jQuery UI Autocomplete not showing AJAX results

Question

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.

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — madalinivascu, Nov 24 '15 at 19:10
Your problem might be that you are only returning the results in the `getJSON` callback function, your function `getSource` is not returning anything.... — A.O., Nov 24 '15 at 19:22
@A.O. I was thinking about something like that! How could I solve something like that? — Enzio, Nov 24 '15 at 19:24

madalinivascu · Accepted Answer · 2015-11-24T19:49:23.247

2

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/

edited Nov 24 '15 at 19:49

answered Nov 24 '15 at 19:11

madalinivascu

32,064
4
39
55

That will not work. First of all since getSource isn't triggered at all and secondly because I need the autocomplete function to trigger the getSource function, not the other way around. – Enzio Nov 24 '15 at 19:15
what are you trying to accomplish with the data,what is this data for? – madalinivascu Nov 24 '15 at 19:17
I want to give the user suggested data retrieved from the API based on it's input. – Enzio Nov 24 '15 at 19:22
Yes, I've tried this one. However the problem now is that the url (which should be based on the user's input) is unset. – Enzio Nov 24 '15 at 19:27

score 0 · Answer 2 · answered Nov 24 '15 at 19:34

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);
        });     
    }
});

score 0 · Answer 3 · answered Nov 11 '17 at 00:22

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);
        });
    }
})

jQuery UI Autocomplete not showing AJAX results

3 Answers3