Question

我正在尝试将jQuery UI自动完成功能绑定到加载文档后附加的输入元素。我尝试了几种解决方案但仍然卡住了。我正在使用以下代码：

// When user click "Add" button to add a new networks value
$(".modal").on("click", ".add-network-value", function(e){
  input = '<input class="edit-input form-control autocomplete-input" type="text" name="'+ table_name + '" size="' + input_width +'">';        
  autocomp_opt={
    source: ["aaa","bbb","ccccc"]
  };
  item = '<div class="networks-item"></div>';
  input = $(input).autocomplete(autocomp_opt);
  item = $(item).append(input);
  $(this).parents(".sub-content").append(item);
}

更新

嗯，事实证明代码本身是正确的。问题是输入框是一个“模态”，它具有比jQuery-ui的autocomplete div的z-index更高的z-index值。您需要更高jQuery-UI自动完成CSS文件的z-index值或降低模态的z-index。

Answer 1

看起来你在“模态”上使用jQuery UI自动完成功能。自动填充模块添加的下拉框可能未显示在模式的顶部，但实际上已创建 - 这可能是您无法看到列表的原因。

Answer 2

是否定义了Javascript变量table_name和input_width？ HTML上的类是否正确定义了？

以下代码应该有效，

HTML：

<div class="sub-content">
    <div class="modal">
        <button class="add-network-value">Add</button>
    </div>
</div>
<div class="networks-item"></div>

使用Javascript：

var table_name  = 'test';
var input_width = 10;
$(document).ready(function() {

    // When user click "Add" button to add a new networks value
    $(".modal").on("click", ".add-network-value", function(e){
        var input = '<input class="edit-input form-control autocomplete-input" type="text" name="'+ table_name + '" size="' + input_width +'">';        
        var autocomp_opt={
            source: ["aaa","bbb","ccccc"]
        };
        var item = '<div class="networks-item"></div>';
        input = $(input).autocomplete(autocomp_opt);
        item = $(item).append(input);
        $(this).parents(".sub-content").append(item);
    });
});

请参阅here获取小提琴。

如何在加载文档后附加到Modal中的输入中实现jQuery UI自动完成功能？

2 个答案: