javascript – 将输入框转换为combobox以进行jQuery自动完成

此代码正常运行.但是,我需要帮助让“输入”标签像组合框一样显示.我试图将输入框设计为组合框而没有成功.我也在寻找一种通过动态构建选项使代码与组合框一起工作的方法.任何和所有的帮助表示赞赏.

$(function () {
  var availableTags = new Array(1000000);
  var j = 0;
  for (var i = 1; i < 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 && 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;
      }
    }

  });
});

.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;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">

<label for="tags">Tags: </label>
<input id="tags" type="text" class="custom-comboBox" value="">

<label for="tags">Tags: </label>
<input id="tags" name="tags" type="text" list="options" class="custom-comboBox" value="">

<datalist id="options">
    <!-- it puts the options here then the input type text gets them as SELEct options -->
</datalist> 

$(function () {
  var availableTags = new Array(10);
  var j = 0;
  for (var i = 1; i < availableTags.length; i++) {
    $('#options').append("<option value='" + i + "'>");
  }

});