Asynch autocomplete with jquery

Question

Я хочу добавить автозаполнение в форму ввода данных с моего сервера. Данные, приведенные на адрес /countries/search возвращается в JSON как это:

[{"name":"Afghanistan","code":"AF"},{"name":"Aland Islands","code":"AX"},{"name":"Albania","code":"AL"}] 

Это мой код:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

<input type="text" name="countries" id="tags"/> 
<script> 
    $(function() { 
     $("#tags").autocomplete({ 
      source: "/countries/search/" 
     }); 
    }); 
</script> 

Когда я что-то типа в поле сервер получает запрос, но автодополнение выглядит немного странно и не содержит каких-либо данных:

Почему это происходит и как я могу это исправить?

Edit:

я узнал, что данные /countries/search должны быть JSON объект только с именами внутри.

Answer 1

В соответствии с документацией here ваш источник должен быть массивом Javascript. Поэтому я предлагаю вам сделать запрос ajax на ваш сервер и вызвать этот метод при обратном вызове.

Что-то вдоль линий:

$.ajax({ 
    url: '/countries/search/', 
    type: 'GET', 
    success: function(data) { 
    $("#tags").autocomplete({ 
     source: data 
    }); 
    }, 
    error: function(jqXHR, textStatus, errorThrown){ 

    } 
});