jQuery jsonp autocomplete невидимые выпадающие предметы

Question

Проблема в том, что все выпадающие элементы невидимы. Автозаполнение работает, я получаю элементы, я могу их выбрать, тот, который вводит изменения в фокусе, курсор меняется на указатель при наведении на элемент в раскрывающемся списке. Я думаю, что это какая-то проблема css, но я не понял это через пару часов ...

Bellow - мой аякс и автозаполнение. Некоторые комментарии: есть data.shift(), чтобы удалить первый элемент (переменная, которая мне нужна на следующем шаге, она не наносит никакого вреда). При выборе пары скрытых входов будет заполнено, в настоящее время один настроен и заполняется в порядке.

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 

и JQuery:

$("#id_city").autocomplete({ 
delay: 1000, 
minLength: 0, 
source: function(request, response) { 
$.ajaxSetup({ 
    beforeSend: function(xhr, settings) { 
     function getCookie(name) { 
      var cookieValue = null; 
      if (document.cookie && document.cookie != '') { 
       var cookies = document.cookie.split(';'); 
       for (var i = 0; i < cookies.length; i++) { 
        var cookie = jQuery.trim(cookies[i]); 
        // Does this cookie string begin with the name we want? 
       if (cookie.substring(0, name.length + 1) == (name + '=')) { 
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
        break; 
       } 
      } 
     } 
     return cookieValue; 
     } 
     if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) { 
      // Only send the token to relative URLs i.e. locally. 
      xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken')); 
     } 
    } 
}); 
$.ajax({ 
url: '/country_auto/?country='+$("#id_country").val(), 
dataType: "jsonp", 
data: { 
search:$('#id_city').val() 
}, 
success: function(data) { 
data.shift(); 
response(data); 
} 
}); 
}, 
focus: function(event, ui) { 
$("#id_city").val(ui.item.city); 
return false; 
}, 
select: function(event, ui) { 
$("#id_city").val(ui.item.city); 
$('#id_latdeg').val(Number(ui.item.latdeg)); 
return false; 
}, 
}); 

Строка JSON выглядит следующим образом:

([{"tz": "Europe/Bratislava", "city": "Handlova", "latmin": 43, "lon": "18E45",  
"latdeg": "48"}, {"tz":  "Europe/Bratislava", "city": "Hlohovec", "latmin": 25, 
"lon": "17E48", "latdeg": "48"}, {"tz":  "Europe/Bratislava", "city": "Humenne", 
"latmin": 56, "lon": "21E54", "latdeg": "48"}]) 

Я думаю, что установка правильно, и она работает. Это просто выпадающие элементы не видны ... их можно выбрать, все работает, но их не видно ... У кого-нибудь есть идея, как это исправить?

Answer 1

Итак, теперь он работает так, как должен. Хитрость заключалась в том, что элементы в выпадающем списке должны быть названы лейблом .. вероятно, где-то написано, но это не пришло ко мне в течение почти 16 часов. Я работаю над этим ... Итак, вот что работает:

Сервер отправляет следующую строку:

([{"tz": "Europe/Bratislava", "label": "Banovce nad Bebravou", "latdeg": "48", 
"lonmin":15, "londeg": "18", "latmin": 43}, {"tz": "Europe/Bratislava", "label": 
"Banska Bystrica", "latdeg": "48", "lonmin": 9, "londeg": "19", "latmin": 44}, {"tz": 
"Europe/Bratislava", "label": "Bardejov", "latdeg": "49", "lonmin": 16, "londeg": 
"21", "latmin": 17}, {"tz": "Europe/Bratislava", "label": "Bratislava", "latdeg": 
"48", "lonmin": 6, "londeg": "17", "latmin": 8}, {"tz": "Europe/Bratislava", "label": 
"Brezno", "latdeg": "48", "lonmin": 38, "londeg": "19", "latmin": 48}]) 

Так что город теперь называется «меткой». Это наиболее важно. Изменения, чтобы сосредоточиться и выбрать, как это:

success: function(data) { 
response (data); 
} 
}); 
}, 
focus: function(event, ui) { 
$("#id_city").val(ui.item.label); 
return false; 
}, 
select: function(event, ui) { 
$('#id_city').val(ui.item.label); 
$('#id_latdeg').val(ui.item.latdeg); 

return false; 
}, 
}); 

Answer 2

автозаполнение требует очень специфического формата для элементов в массиве внушения. Из documentation:

массива: массив может быть использован для локальных данных. Есть два поддерживаемых форматов:

• Массив строк: [ "Choice1", "Choice2" ]
• Массив объектов с ярлыком и значение свойства: [ { label: "Choice1", value: "value1" }, ... ]

Свойство Метка отображается в меню внушения. Значение будет вставлено во входной элемент, когда пользователь выбирает элемент. Если указано только одно свойство, оно будет использоваться для обоих, например, если вы предоставляете только свойства значения, это значение также будет использоваться как метка.

String: Когда используется строка, плагин Autocomplete ожидает, что эта строка укажет на ресурс URL, который будет возвращать данные JSON. Он может находиться на одном и том же хосте или на другом (должен предоставить JSONP). Плагин Autocomplete не фильтрует результаты, вместо строки запроса добавляется поле term, которое серверный сценарий должен использовать для фильтрации результатов. Например, если для параметра источника установлено значение "http://example.com", а пользовательский тип foo, запрос GET будет сделан в http://example.com?term=foo. Данные сами могут быть в том же формате, что и локальные данные, описанные выше.

Поскольку ваши данные не соответствуют либо из этих требований, вы не видите никаких результатов (потому что виджет не знает, как отображать их).

Есть две вещи, которые вы можете сделать, чтобы исправить это:

1. Обеспечить некоторые пользовательские рендеринга и выбирающий логики, так что виджет знает, как сделать предложения:

   Для этого вам необходимо реализовать метод пользовательских _renderItem и реализовать select обработчик (и, скорее всего focus, а также, но реализация в основном то же самое):

   $('#id_city').autocomplete({ 
       /* other options */ 
       select: function (event, ui) { 
        /* Set the input's value to the item's "city" property */ 
        this.value = ui.item.city; 
   
        // Prevent the default action, which is to place 
        // `item.value` in the field 
        event.preventDefault(); 
       } 
   }).data('ui-autocomplete')._renderItem = function (ul, item) { 
       return $('<li />') 
        .append($('<a />', { text: item.city })) 
        .appendTo(ul); 
   }; 
   

   Пример:http://jsfiddle.net/3xcLpaLw/

2. преобразование данных в формат, который ожидает автозаполнения виджет.

   канонический способ сделать это состоит в использовании $.map, превращая каждый элемент в вашем объекте ответа на новый объект, который автозаполнение может обрабатывать:

   source: function (request, response) { 
       /* your other code omitted for brevity */ 
   
       response($.map(data, function (item) { 
        // for every item in your response array, add a "label" and "value" 
        // property so that autocomplete can process the results. 
        // in various event handlers, the "item" parameter will still have 
        // the values you got from the server. 
        item.label = item.city; 
        item.value = item.city; 
   
        return item; 
       })); 
   } 
   

   Пример:http://jsfiddle.net/ys3jvkLh/1/

В качестве примера я использовал свойство city, но на самом деле вы могли использовать любое свойство для объектов ответа.