设置动态创建的Autocompete建议位置在输入字段下

Question

我创建了动态创建的自动完成功能。自动填充工作正常。 问题是放置其建议清单。

当我们进入自动填充时，我们会得到建议。在我的情况下，我已将它添加到不同的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>

Answer 1

试试这个：

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

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

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