style option tag for jquery-ui autocomplete solution - appear as vertical list
<p><a href="https://i.stack.imgur.com/XHMVr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XHMVr.png" alt="enter image description here"></a></p>

<p>Screenshot of autocomplete lumping all results together in one line as opposed to as a vertical list.</p>

<p><strong>I have the below:</strong></p>

<pre><code>$(document).ready(function() {
  $.widget("app.autocomplete", $.ui.autocomplete, {
    _create: function() {
      if(this.element.is("select")) {
        var self = this;
        this.original = this.element.hide();
        this.element = $("&lt;input/&gt;").insertAfter(this.original);
        this.options.source = function(request, response) {
          var filter = $.ui.autocomplete.filter,
            $options = self.original.find("option"),
            result = $options.map(function() {
              return $(this).val();
            });
          response(filter(result, request.term));
        };
      }
      this._super("_create");
    },
    _destroy: function() {
      this._super("_destroy");
      this.element.remove();
      this.original.show();
    }
  });
  $(function() {
    $("#autocomplete").autocomplete();
  });
});
</code></pre>

<p>In accordance with my mark up, which looks like:</p>

<pre><code>&lt;select id="autocomplete"&gt;
    &lt;option value=""&gt;Select State&lt;/option&gt;
    &lt;option value="AL"&gt;Alabama&lt;/option&gt;
    &lt;option value="AK"&gt;Alaska&lt;/option&gt;
</code></pre>



<p>It is showing the auto complete options on one line currently; ie. Type in A, the results are '<code>ALAKAR...</code>' etc all on one horizontal line -- I would like this to appear as.</p>

<p><em>ie.</em> Alabama<br>
    Alaska<br>
    Etc<br>
    Etc<br></p>

<p>I don't want to alter the HTML mark-up. I have tried styling the option tag as follows.</p>

<p><em>ie.</em></p>

<pre><code>option { 
  float:left;
  width: 120px;
}
</code></pre>