自动完成标签不显示隐藏元素上的数据

Question

显示后自动完成标签不在具有 display: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 属性检查了这段代码，它运行良好

Answer 1

因此，如果您查看 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 选项设置为正确的 element/selector。 示例：

$('#search').autocomplete({
  appendTo: $('#search').parent()
  // other options
});

我已经分叉了你的Fiddle，你可以检查我的here，我基本上省略了AJAX的东西，但我没有改变任何CSS，并使用 jQuery 2.2.4 和 jQuery UI 1.11.4.

我也分叉了分叉的 Fiddle 并将其更改为使用 jQuery 3.3.1 with jQuery UI 1.12.1。你可以看看here.

自动完成标签不显示隐藏元素上的数据

Autocomplete label not displaying data on hidden Element

html

javascript

jquery

jquery-ui-autocomplete