title: Convert input box to combobox for jQuery autocomplete
body: <p>This code is functioning correctly.  However, I need help getting the "input" tag to display like a combobox. I have tried to styled the inputbox as a combobox without success. I am also looking for a way to make the code work with a combobox by building the options dynamically.  Any and all help is appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
    var availableTags = new Array(1000000);
    var j = 0;
    for (var i = 1; i &lt; availableTags.length; i++) {
      availableTags[j++] = i.toString();
    }
    $("#tags").autocomplete({
      source: function (req, responseFn) {
  
        var re = req.term;
        var matcher = new RegExp("^" + re, "i");
        var a = $.grep(availableTags, function (item) {
          return matcher.test(item);
        });
        responseFn(a.slice(0, 5));
      },
      select: function (event, ui) {
        if (ui.item &amp;&amp; ui.item.value) {
          var titleinput = ui.item.value;
          ui.item.value = $.trim(titleinput);
          alert(ui.item.value);
        }
      },
      change: function (event, ui) {
        if (!valid) {
          // remove invalid value, as it didn't match anything
          $(this).val("");
          select.val("");
          return false;
        }
      }
  
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.custom-combobox {
    position: relative;
    display: inline-block;
    border-style: solid;
    border-width: 1px;
  }
  .custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
  }
  .custom-combobox-input {
    margin: 0;
    padding: 5px 10px;  
  }
  
  /*
  .custom-combobox-list-item {
    color: blue;
    font-weight: bold;
  }
  .custom-combobox-input , .custom-combobox-list-item.ui-state-focus {
    color: black;
    font-weight: bold;
    font-style: italic;
  }
  */
  
  #tags {
    width: 40px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"&gt;
  
  &lt;label for="tags"&gt;Tags: &lt;/label&gt;
  &lt;input id="tags" type="text" class="custom-combobox" value=""&gt;</code></pre>
  </div>
  </div>
  </p>