jquery - 定位 JQuery 自动完成结果

Question

我在我的网站上实现了 JQuery 自动完成，我在搜索表单中显示结果时遇到问题。搜索表单嵌入到主布局中的 Bootstrap3 导航栏中。

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

我希望搜索表单和结果之间有一个“差距”，因为结果部分“隐藏”在搜索表单中。

在 JQuery 中，我添加

 position: { my : "bottom+3" },

但它不起作用。至于CSS，除了一些与这个搜索表单和布局无关的表格和表单外，我非常依赖bootstrap的cdn，所以我没有为这个搜索表单定制css。 有什么想法吗？

Answer 1

刚刚解决了

.ui-autocomplete {
margin-top: 20px !important;
top: 0px !important;