Bootstrap 3 Typeahead Ajax
<p>I'm using <a href="https://github.com/bassjobsen/Bootstrap-3-Typeahead" rel="nofollow">https://github.com/bassjobsen/Bootstrap-3-Typeahead</a></p>

<p>My code:</p>

<pre><code>&lt;input type="text" class="typeahead" autocomplete="off"&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function() {
    $('.typeahead').typeahead({
        autoSelect: true,
        minLength: 2,
        delay: 400,
        source: function (query, process) {
            $.ajax({
                url: '/search/searchCities',
                data: {q: query},
                dataType: 'json'
            })
                .done(function(response) {
                    console.log(response.data);
                    return process(response.data);
                });
        }
    });
});
&lt;/script&gt;
</code></pre>

<p>My backend code returns an json object like </p>

<pre><code>{status: "OK", data: ["Moscow", "New York", "Odessa"]}
</code></pre>

<p>by php code</p>

<pre><code>&lt;?= echo json_encode(["status" =&gt; "OK", "data" =&gt; ["Moscow", "New York", "Odessa"]]) ?&gt;
</code></pre>

<p>After I type 2 or more letters in the input there's an error in the browser console like this</p>

<pre><code>GET http://localhost/search/searchCities?q=mo 200 OK
TypeError: a is undefined
...rep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g&gt;f;f++)d=!b(a[f],f),d!==...

jquery.min.js (row 2, col 3476)
["Moscow"]
</code></pre>

<p>I see the dropdown with "Moscow" option, I can choose it and everything would be fine if i had not got the error in console.
Please, show me my mistake.</p>

<p>I tried to use jquery.js (not the min-version). The error was</p>

<pre><code>TypeError: elems is undefined
length = elems.length,

jquery.js (row 459, col 4)
</code></pre>

<p>I guess that something wrong with data type but i can't find it by myself.</p>