jQuery jsonp自动完成不可见下拉项_Jquery_Ajax_Jquery Ui_Autocomplete_Jquery Ui Autocomplete

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

jquery ajax jquery-ui autocomplete

jQuery jsonp自动完成不可见下拉项,jquery,ajax,jquery-ui,autocomplete,jquery-ui-autocomplete,Jquery,Ajax,Jquery Ui,Autocomplete,Jquery Ui Autocomplete,问题是所有下拉项都是不可见的。自动完成工作，我得到项目，我可以选择它们，输入中的一个改变焦点，光标变为指针悬停在下拉列表中的项目上。我想这是css的问题，但我已经几个小时没想到了下面是我的ajax和自动完成。一些注释：有一个data.shift（）来删除第一项（我在下一步中需要一个变量，它不会造成任何伤害）。在选择时，将填充两个隐藏输入，当前一个已设置并正确填充 <script src="//code.jquery.com/jquery-1.10.2.js"></script

问题是所有下拉项都是不可见的。自动完成工作，我得到项目，我可以选择它们，输入中的一个改变焦点，光标变为指针悬停在下拉列表中的项目上。我想这是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>

我认为设置是正确的，它可以工作。只是下拉列表项不可见。。。他们可以被选择，一切都是工作，但他们不能被看到。。。有人知道如何解决这个问题吗？

所以，它现在可以正常工作了。诀窍是下拉列表中的项目需要命名为标签。。可能是在某个地方写的，但我在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的更改如下所示：

([{"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"}])

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

所以，它现在应该可以正常工作了。诀窍是下拉列表中的项目需要命名为标签。。可能是在某个地方写的，但我在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的更改如下所示：

([{"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"}])

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

“自动完成”要求建议数组中的项具有非常特定的格式。从：

数组：数组可用于本地数据。支持两种格式：

字符串数组：
```
[“Choice1”、“Choice2”]
```

具有标签和值属性的对象数组：

[{label:“Choice1”，value:“value1”}，…]

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

String：使用字符串时，自动完成插件希望该字符串指向将返回JSON数据的URL资源。它可以在同一台主机上，也可以在不同的主机上（必须提供JSONP）。Autocomplete插件不会过滤结果，而是添加了一个查询字符串和一个术语字段，服务器端脚本应该使用该字段过滤结果。例如，如果源选项设置为

“http://example.com“

如果用户键入foo，则会向

http://example.com?term=foo

数据本身可以采用与上述本地数据相同的格式。

因为您的数据与这两个要求都不匹配，所以您看不到任何结果（因为小部件不知道如何显示它们）

要解决此问题，您可以做两件事：

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

为此，您需要实现一个自定义方法并实现

select

处理程序（很可能也是

focus

，但实现基本相同）：

示例：

我使用了

city

属性作为示例，但实际上您可以在响应对象上使用任何属性。

自动完成要求建议数组中的项具有非常特定的格式。从：