Question

我正在尝试使jquery自动完成工作。输入输入时，建议将按预期显示。我苦苦挣扎的问题是如何使附加的数据可单击，以便输入被单击的值填充。当我点击建议时，什么也没有发生，当我按下向下键并按Enter时，它会按预期自动完成。如何获得可点击的项目？

在此处找到演示：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>

Answer 1

它可能只是与CSS相关，而不是jQuery。尝试为jQuery UI添加此CSS：

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

这是从另一个提到此问题的答案中找到的，它也有其他解决方案：jQuery UI autocomplete select event not working with mouse click

jQuery自动完成-附加提示不可点击

1 个答案: