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