Question

问题是所有下拉项都是不可见的。自动完成工作，我得到项目，我可以选择它们，输入中的一个更改焦点，光标更改为指针悬停在下拉列表中的项目上。我认为这是一些css问题，但我几个小时都没想到......

Bellow是我的ajax和autocomplete。一些评论：有一个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" }, ... ]


标签属性显示在建议菜单中。当用户选择项目时，该值将插入到input元素中。如果仅指定了一个属性，则它将用于两者，例如，如果仅提供值属性，则该值也将用作标签。

字符串：使用字符串时，自动完成插件希望该字符串指向将返回JSON数据的URL资源。它可以位于同一主机上，也可以位于不同的主机上（必须提供JSONP）。自动完成插件不会过滤结果，而是使用术语字段添加查询字符串，服务器端脚本应使用该字段来过滤结果。例如，如果source选项设置为"http://example.com"且用户键入foo，则会向http://example.com?term=foo发出GET请求。 数据本身可以采用与上述本地数据相同的格式。

由于您的数据与这些要求中的任何一个都不匹配，因此您看不到任何结果（因为窗口小部件不知道如何显示它们）。

你可以做两件事来解决这个问题：

提供一些自定义渲染并选择逻辑，以便小部件知道如何呈现建议：

为此，您需要实现自定义_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/

将数据转换为自动完成小部件所需的格式。

执行此操作的规范方法是使用$.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属性作为示例，但实际上您可以在响应对象上使用任何属性。

jQuery jsonp自动完成隐形下拉项目

2 个答案: