在输入的字段下设置动态创建的自动完成建议位置答案

【问题标题】：Set Dynamically Created Autocompete Suggestions Position Under the Entered Field在输入的字段下设置动态创建的自动完成建议位置
【发布时间】：2017-06-12 13:01:55
【问题描述】：

我已经创建了动态创建的自动完成功能。自动完成工作正常。问题是其建议列表的放置。

当我们进入自动完成时，我们会得到建议。就我而言，我已将其添加到不同的 div 中。所以当我进入一个领域时，我会得到第二个领域的建议。我已经添加了它的图片。

如图所示，当我输入第一个输入时，我会在第二个输入中得到建议。

脚本：

$('body').on('focus',".skill_class", function(){

 $('.skill_class').autocomplete({
    lookup: skill_string,
    appendTo: '.skill_outer_div',
    minChars: 1,
    onSelect: function (suggestion) {
        var selectedValueID = suggestion.data;          
        $(this).closest('.skill_outer_div').find('input[name="key_skill_id_hidden[]"]').val(selectedValueID);
    },  
    showNoSuggestionNotice: true,
    noSuggestionNotice: 'No Skill Found.'
});
});

HTML 代码：

<div class="col-md-4">
<div class="form-group skill_outer_div">        
    <label for="key_skill" class="control-label">Skill *</label>
    <input type="text" name="skill_input[]" id="skill_input" required class="form-control skill_class" />       
</div>

【问题讨论】：

您必须使用 id 并将其分配给所有动态创建的组件，并且不一样更改它。就像如果 div id 是 div1 那么在动态创建元素之后有一个名为 div2 的新 id
在大多数动态创建元素的情况下，我更喜欢 id 比 class 更可靠。
好的，我知道 id 更可靠，但是如何更改动态创建的元素中的所有 id？
查看此链接：api.jquery.com/replaceAll

标签： jquery css autocomplete

【解决方案1】：

试试这个：

$('body').on('focus',".skill_class", function(e){

 $(e.target).autocomplete({
    lookup: skill_string,
    appendTo: '.skill_outer_div',
    ...

由于$('.skill_class') 选择了许多字段，jQuery 可能会选择建议列表并将其应用于选择的最后一项。改用$(e.target) 将有助于它识别相应的字段并正确放置结果。

【讨论】：