jQuery自动完成错误的定位

时间:2015-01-04 18:46:41

标签: jquery html autocomplete

我试图添加jQuery自动完成https://www.devbridge.com/sourcery/components/jquery-autocomplete/并遇到了posposing porblem。建议清单定位错误。

这是显示建议的屏幕截图。 http://i.imgur.com/egP2sOe.png

源代码

                <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);
                    }
                }
            });
        }
    });
     };

编辑1:

我检查了自动完成建议元素,我没有填充或边距。此外,我已经没有父母的分数和#39;上课,问题依旧。

.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; }

编辑2:

我已经尝试在建议列表中应用负边距顶部,并且看起来由于某种原因建议列表远远等于80px。有什么想法吗?

0 个答案:

没有答案