オートコンプリートの候補をフォーマットするにはどうすればよいですか？

Question

私の現在のプロジェクト私は、autosggestionsとquicksearchのjqueryオートコンプリートを使用しています。一般的には正常に動作します。しかし、私は定型化に悩まされています。私の例には、このリンクポイント

$(document).ready(function() { 
 
    var tagsAutocomplete = ["Schaufenster", "Schauspieler", "Schadenfreude"]; 
 
    $("#suche").autocomplete({ 
 
     appendTo:"#main1 arrowbox", 
 
     minLength: 3, 
 
     source: function(request, response) { 
 
     var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term),"i"); 
 
     response($.grep(tagsAutocomplete,function(item){ 
 
     return matcher.test(item); 
 
     })); 
 
     } 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.0/themes/black-tie/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.0/jquery-ui.js"></script> 
 

 
<div id="canvas"> 
 
    <section id="cont-right"> 
 
     <div class="systemDiv"> 
 
    <nav id="main"> 
 
     <ul> 
 
     <li id="main1"> 
 
     <ul> 
 
     <li> 
 
      <div class="arrowbox"> 
 
      <div class="image-menu-item"> 
 
      <input autocomplete="off" class="ui-autocomplete-input" name="query" id="suche" maxlength="180" placeholder="Suchbegriff" tabindex="-1" type="text"> 
 
      </div> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
    </section> 
 
    </div>

の下には、私は別の場所で「余白下」または「マージントップ」を追加しようとしました。何も助けなかった。結果リストは常に入力フィールドの下に表示されます。私はどちらかでここにいくつかの投稿を見つけましたが、それは助けにならなかった。

アイデアをお持ちですか？ありがとう。

注：最初の3文字「sch」にすべてのエントリが表示されます。

Answer 1

同僚と一緒に私の問題の解決策を見つけることができました。

を追加すると、ul.ui-autocomplete {top: <number of pixels>px !important;}が解決しました。

主な理由は、CSSファイルのCSS宣言がjquery-ui.cssより優先されます。