jQuery 自动完成 - 附加建议不可点击
jQuery autocomplete - appended suggests not clickable
我正在尝试 jquery 自动完成功能。输入输入时,建议会按预期显示。我正在努力解决的问题是如何使附加数据可点击,以便输入充满点击值。当我点击提示时没有任何反应,当我按下向下键并按回车键时,它会按预期自动完成。如何让项目可点击?
在此处查找演示:https://www.teamazing.de/test-locationsuche/
这是我的代码(注意:我使用 "jQuery" 而不是“$”来使其在 wordpress 中运行)
<script>
jQuery( function() {
function log( message ) {
jQuery( "<div></div>" ).text( message ).prependTo( "#log" );
jQuery( "#log" ).attr( "scrollTop", 0 );
}
jQuery.ajax({
url: "https://teamazing.de/feeds/locationsfeed.xml",
dataType: "xml",
success: function( xmlResponse ) {
var data = jQuery( "item", xmlResponse ).map(function() {
return {
value: jQuery( "name", this ).text(),
id: jQuery( "type", this ).text(),
image: jQuery("type", this ).text()
};
}).get();
jQuery( "#birds" ).autocomplete({
source: data,
select: function (event, ui) {
$( "#birds" ).val( ui.item.value );
},
minLength: 0
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item.value )
.append( item.image + " - " + item.value )
.appendTo( ul );
};
}
});
} );
</script>
它可能只是 CSS 相关,而不是 jQuery。尝试为 jQuery 添加此 CSS UI:
.ui-autocomplete {
z-index: 99999; /* adjust this value */
}
这是从另一个提到这个的答案中找到的,也有其他解决方案:jQuery UI autocomplete select event not working with mouse click
我正在尝试 jquery 自动完成功能。输入输入时,建议会按预期显示。我正在努力解决的问题是如何使附加数据可点击,以便输入充满点击值。当我点击提示时没有任何反应,当我按下向下键并按回车键时,它会按预期自动完成。如何让项目可点击?
在此处查找演示:https://www.teamazing.de/test-locationsuche/
这是我的代码(注意:我使用 "jQuery" 而不是“$”来使其在 wordpress 中运行)
<script>
jQuery( function() {
function log( message ) {
jQuery( "<div></div>" ).text( message ).prependTo( "#log" );
jQuery( "#log" ).attr( "scrollTop", 0 );
}
jQuery.ajax({
url: "https://teamazing.de/feeds/locationsfeed.xml",
dataType: "xml",
success: function( xmlResponse ) {
var data = jQuery( "item", xmlResponse ).map(function() {
return {
value: jQuery( "name", this ).text(),
id: jQuery( "type", this ).text(),
image: jQuery("type", this ).text()
};
}).get();
jQuery( "#birds" ).autocomplete({
source: data,
select: function (event, ui) {
$( "#birds" ).val( ui.item.value );
},
minLength: 0
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item.value )
.append( item.image + " - " + item.value )
.appendTo( ul );
};
}
});
} );
</script>
它可能只是 CSS 相关,而不是 jQuery。尝试为 jQuery 添加此 CSS UI:
.ui-autocomplete {
z-index: 99999; /* adjust this value */
}
这是从另一个提到这个的答案中找到的,也有其他解决方案:jQuery UI autocomplete select event not working with mouse click