自动填充标签不显示隐藏输入字段上的数据,显示:none显示后的属性。
我试图使用下面给出的脚本从MySQL数据库自动完成数据。在开发人员工具网络控制台中提供正确响应时,它不显示标签。当我使用.show()方法显示div时,自动完成不显示标签。
function openSearchDiv(){
$('.search').show();
}
$(document).on('focus','#search',function(){
$(this).autocomplete({
source: function( request, response ) {
$.ajax({
url: 'products.php',
dataType: 'json',
method: 'post',
data: {
name_startsWith: request.term,
type: 'type'
},
success: function( data ) {
response( $.map( data, function( item ) {
return {
label: item['id'],
value: item['id'],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 1,
select: function( event, ui ) {
// $('#player').val(ui.item.data.player);
// $('#marks').val(ui.item.data.marks);
}
});
});
.search {
display:none;
margin-top: 20px;
}
<div class="search">
<input type="text" id="search" placeholder="Type Id" />
</div>
我已经从display:none
属性中检查了这个代码,它的工作正常
所以,如果你看看my Fiddle,我使用jQuery版本3.3.1和jQuery UI版本1.12.1 - 写作时的稳定版本。
但是在your Fiddle上,你使用jQuery 3.3.1和jQuery UI 1.11.4(遗留版本)。这是一个问题,因为使用jQuery 3.3.1,您应该使用jQuery UI 1.12.1。
如果你想使用jQuery UI遗留版本,你应该使用jQuery 2.2.4或更早版本。此外,在您的情况下,您应该将appendTo
选项设置为正确的元素/选择器。例:
$('#search').autocomplete({
appendTo: $('#search').parent()
// other options
});
我已经分叉你的小提琴你可以检查我的here我基本上省略了AJAX的东西,但我没有改变任何CSS,并使用jQuery 2.2.1与jQuery UI 1.11.4。
我还分叉了分叉的小提琴并将其改为使用jQuery 3.3.1和jQuery UI 1.12.1。你可以检查一下here。