jQuery autocomplete - appended suggests not clickable

Question

I'm trying to make a jquery autocomplete work. When entering input the suggestions are showing as expected. The problem I'm struggling with is how to make the appended data clickable so that the input is filled with the clicked value. When I click on the suggests nothing is happening, when I hit the down key and press enter it is autocompleting as expected. How do I get the items clickable?

Find a demo here: https://www.teamazing.de/test-locationsuche/

Here is my code (note: I'm using "jQuery" instead of "$" to make it work in 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>

Answer 1

It may just be CSS related and not jQuery at all. Try adding this CSS for the jQuery UI:

.ui-autocomplete {
    z-index: 99999; /* adjust this value */
}

This was found from another answer that mentions this and has other solutions too: jQuery UI autocomplete select event not working with mouse click