jQuery自动完成错误定位

我试图添加jQuery自动完成，但遇到了定位问题。建议列表位置错误

这是如何显示建议的屏幕截图。

源代码

                <div class="form-group ingredients-form ">
                    <label for="ingredients" class="col-sm-2 control-label">Ingridientai</label>
                    <div class="col-sm-10  ">
                        <div class="row">
                            <div class="form-group form-group-options col-md-12">
                                <div class="input-group input-group-option autocomplete-wrapper">
                                    <input id="autocomplete" type="text" name="ingredients[]" class="form-control" placeholder="Ingridientas" autocomplete='off' onfocus="startAutocomplete(this)">
                                    <input type="text" name="quantities[]" class="form-control" placeholder="kiek">
                                    <select id="unit-selection" class="col-md-12 form-control" placeholder="Pasirinkite vieną ingredientų">
                                        <option value="" disabled selected>Prašome pasirinkti ingredientą</option>
                                    </select>
                                    <span class="input-group-addon input-group-addon-remove">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



function startAutocomplete(eventHolder) {
    $(eventHolder).autocomplete({
        serviceUrl: 'product/list',
        paramName: 'name',
        delimiter: ',',
        transformResult: function(response) {
            return {
                suggestions: $.map($.parseJSON(response), function(item) {
                    return { 
                        value: item.name, 
                        data: item.productId 
                    };
                })
            };
        },
        onSelect: function(suggestion) {
            var siblingElement = eventHolder.parentNode.getElementsByTagName('select')[0];
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: 'product/' + suggestion.data + '/units/list',
                success: function(response) {
                    siblingElement.getElementsByTagName('option')[0].remove();
                    $.each(response, function(index) {
                        $(siblingElement).append('<option value="' + response[index].unitId + '">' + response[index].abbreviation + '</option>').html();
                    })
                },
                error: function(jqXHR, exception) {
                    if (jqXHR.status === 0) {
                        console.log('Connection was not established.\n Verify Network.');
                    } else if (jqXHR.status == 404) {
                        console.log('Requested page not found. [404]');
                    } else if (jqXHR.status == 500) {
                        console.log('Internal Server Error. [500]');
                    } else if (exception === 'parsererror') {
                        console.log('Requested JSON parse failed.');
                    } else if (exception === 'timeout') {
                        console.log('Time out error.');
                    } else if (exception === 'abort') {
                        console.log('Ajax request aborted.');
                    } else {
                        console.log('Uncaught Error.\n' + jqXHR.responseText);
                    }
                }
            });
        }
    });
     };

编辑2：

---

我尝试过在建议列表中使用负边距顶部，但由于某些原因，建议列表的距离似乎相差80像素。有什么想法吗？

可能与CSS比HTML/JS更相关。可能是CSS问题，检查您的元素以查看自动完成框的任何边距或填充。

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto;}
.autocomplete-suggestion { padding: 5px 5px; white-space: nowrap; overflow: hidden; font-size:12px}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; color: #3399FF; }