Overlapping divs

Question

I have a search input, which adds the mechanistic tbm, but the result is getting overlapped

<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>

Answer 1

You can go further down div .searchresultsMecanico by changing the value in top of 3 for a higher value, which will give more spacing. For example, put 25 which may already be sufficient:

$('.searchresultsMecanico')
.css('top', $('#mecanico')
.offset().top + $('#mecanico').height() + 25 + 'px');

Suggestion

You can avoid redundancies in the code by wiping:

$('.searchresultsMecanico').css({
    'left': $('#mecanico').offset().left + 'px'),
    'top': $('#mecanico').offset().top + $('#mecanico').height() + 3 + 'px'
});

And

$('.searchresultsMecanico').html(html).show();