我试图添加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。有什么想法吗?