I am currently integrating JQuery Autocomplete into my website, but I am encountering an issue with displaying the search results in the search form. The search form is placed within a Bootstrap 3 navbar on the main layout of the site.
Embedded inside the navbar
<div class="col-sm-3 col-md-3" id="search">
<form class="navbar-form" role="search" action ="{{ path('search')}}" method ="get">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search city/town" name="query" value="{{ app.request.get('query') }}" id="search_keywords">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
</div>
js
<script>
$(function() {
function log( message ) {
$( "#log" ).scrollTop( 0 );
}
$( "#search_keywords").autocomplete({
source: "{{ path('city_autocomplete') }}",
minLength: 2,
messages: {
noResults: '',
results: function() {}
},
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.label:
"Nothing selected, input was " + this.value );
$("#search_keywords").val(ui.item.label);
$("#search_keywords").val(ui.item.value);
return false;
},
change: function( event, ui ) {
$( "#search_keywords" ).val( ui.item? ui.item.value : 0 );
}
});
});
</script>
I need to create a 'gap' between the search form and the displayed results as some of the results are being partially hidden by the search form.
https://i.sstatic.net/e5hzR.png
In the JQuery script, I tried adding
position: { my : "bottom+3" },
However, this solution did not work for me. In terms of CSS, I have mainly utilized Bootstrap's CDN for styling, and do not have any custom CSS specifically for this search form. Any suggestions or ideas on how to address this issue?