JSON Array for jQuery UI Autocomplete

Question

The task is to get local JSON file with array of city names and put them to autocomplete. There is no info exactly about JSON arrays, always talk about pairs 'key'-'value'. So I have a question: is it possible to use arrays with single items in JSON and if it is where is the mistake of my code?
JSON

    [
    "Minsk",
    "London",
    "Riga",
    "Vilnius",
    "Warszaw",
    "Paris",
    "Moscow",
    "Tallin",
    "Berlin",
    "Amsterdam",
    "Oslo",
    "Helsinki"
]

JS

$('#tags').autocomplete({
    source: function(request, response) {
        var result = $.ajax({
            url: '../source.json',
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                var array = [];
                response($.each( data, function(item) {
                    array.push(item);
                    return array;
                }));
                return array;
            }
        });
    }
});

Could you post what the javascript error is? You can look at the console in your browser dev tools. — Mark
– Mark, Commented Dec 21, 2014 at 21:45
I would try to navigate to the source.json file. If this works, make ../source.json an absolute path and see if your AJAX call will work. In your success function I would put in a console.log(data) statement so you can see what is being returned from the URL. — Mark
– Mark, Commented Dec 21, 2014 at 21:54
"local JSON file" - if you're loading/attempting to read files straight from your machine (ie with file://), this is unlikely to work. As soon as you move beyond basic development, you usually need to serve files as though they came from a webserver — James Thorpe
– James Thorpe, Commented Dec 21, 2014 at 22:09
@Mark I added absolute path, success function doesn't work: the message is that data is not defined — Maria Piaredryj
– Maria Piaredryj, Commented Dec 21, 2014 at 22:11

Makaze · Accepted Answer · 2014-12-21 22:59:27Z

2

JSON does support arrays as well as objects.

Your code doesn't return the result to the source. In fact, you can't wait for $.ajax() to finish at all without using a setInterval to check it or the like. The best method is to access the JSON file once when the page loads and reference the source from there.

Try:

var dict = [];

$.ajax({
  url: 'https://dl.dropboxusercontent.com/u/100496307/source.json',
  method: 'GET',
  dataType: 'json',
  success: function(data) {
    $.each(data, function() {
      dict.push(this.toString());
    });
    return dict;
  }
});

$('#tags').autocomplete({
  source: dict
});

$('#tags').keydown(function() {
  console.log(dict);
});

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css" />
</head>

<body>
  <input type="text" id="tags" />
</body>

edited Dec 21, 2014 at 22:59

answered Dec 21, 2014 at 21:33

Makaze

1,0967 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Maria Piaredryj Over a year ago

I've changed location of file JSON and tried your solution - there is no reaction( [json now is here] (dl.dropboxusercontent.com/u/100496307/source.json)

Makaze Over a year ago

Fixed. Try the snippet.

Maria Piaredryj Over a year ago

Thanks! It works! There was mistake with editing json for autocomplete, right? Please explain what does line 'complete = true;' and why do you write '(function() { return dict; })()' instead of 'function() { return dict; }'?

Makaze Over a year ago

The mistake was that you were trying to use a source array that didn't exist yet (it had to grab it with AJAX). The current code will use an empty array if the AJAX hasn't loaded but will use the AJAX array if it has loaded. completed is from an earlier attempt. Removed it now.

Makaze Over a year ago

I used the function call because I thought it wouldn't dynamically grab dict every time you typed and would only use the value of dict from when you first bound .autocomplete(), but I just tested it and that was wrong. I'll remove that as well. Good catch.

Collectives™ on Stack Overflow

JSON Array for jQuery UI Autocomplete

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related