I have a search input, which adds the tbm mechanic, but the result is getting superimposed
<div class="col-lg-4">
<label for="mecanico">Mecânico</label>
<div class="input-group">
<input type="text" name="mecanico" id="mecanico" style="text-transform: uppercase;" autocomplete="off" class="form-control" data-type="search_mecanico" />
<span class="input-group-btn">
<input type="button" class="client_add_button btn btn-success" onclick="window.open('<?php echo BASE_URL; ?>clients/add')" value="+"/>
<div style="clear:both"></div>
</span>
</div>
</div>
<script>
$('#mecanico').on('keyup', function() {
var datatype = $(this).attr('data-type');
var q = $(this).val();
if (datatype != '') {
$.ajax({
url: BASE_URL + 'ajax/' + datatype,
type: 'GET',
data: {
q: q
},
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function(json) {
if ($('.searchresultsMecanico').length == 0) {
$('#mecanico').after('<div class="searchresultsMecanico"></div>');
}
$('.searchresultsMecanico').css('left', $('#mecanico').offset().left + 'px');
$('.searchresultsMecanico').css('top', $('#mecanico').offset().top + $('#mecanico').height() + 3 + 'px');
var html = '';
for (var i in json) {
html += '<div class="si"><a href="javascript:;" onclick="selectmecanico(this)" data-id="' + json[i].id + '">' + json[i].name + '</a></div>';
}
$('.searchresultsMecanico').html(html);
$('.searchresultsMecanico').show();
}
});
}
});
</script>