title: How to format autocomplete suggestions?
body: <p>for my current project I am using jquery autocomplete for a quicksearch with autosuggestions. In general it works fine. Though, I am havig trouble with formating. Below this link points to my example </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   $(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);
         }) );
        }
      });
     });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.0/themes/black-tie/jquery-ui.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.0/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;div id="canvas"&gt;
     &lt;section id="cont-right"&gt;
        &lt;div class="systemDiv"&gt;
       &lt;nav id="main"&gt;
        &lt;ul&gt;
         &lt;li id="main1"&gt;
          &lt;ul&gt;
           &lt;li&gt;
            &lt;div class="arrowbox"&gt;
             &lt;div class="image-menu-item"&gt;
              &lt;input autocomplete="off" class="ui-autocomplete-input" name="query" id="suche" maxlength="180" placeholder="Suchbegriff" tabindex="-1" type="text"&gt;
             &lt;/div&gt;
            &lt;/div&gt;
           &lt;/li&gt;
          &lt;/ul&gt;
         &lt;/li&gt;
        &lt;/ul&gt;
       &lt;/nav&gt;
      &lt;/div&gt;
     &lt;/section&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried to add "margin-bottom" or "margin-top" in different places. Nothing did help. The result list is always stick underneath the input field. I found some posts here in SO either, but the didn't could help.</p>
  
  <p>Have someone an idea? Thanks.</p>
  
  <p>Note: The three first letter "sch" will list all entries.</p>