jQuery jsonp 自动完成不可见的下拉项

Question

问题是所有下拉菜单项都是不可见的。自动完成工作正常，我得到项目，我可以选择它们，输入中的项目在焦点上发生变化，光标在悬停在下拉列表中的项目上时变为指针。我认为这是一些 css 问题，但几个小时后我还没有弄清楚......

贝娄是我的 ajax 和自动完成功能。一些评论:有一个 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}])

所以城市现在被称为“标签”。这是最重要的。 focus 和 select 的变化如下:

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