JQuery ComboBox

Invoke the loadFromSelect method of the jqxComboBox Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxComboBox'></div>
<div>
    <input style="margin-top: 20px;" type="button" id='jqxButton' value="Load..." />
</div>
<br/>
<select style='height: 25px; width: 200px;' id='select'>
    <option>Affogato</option>
    <option>Americano</option>
    <option>Bicerin</option>
    <option>Breve</option>
    <option>Café Bombón</option>
    <option>Caffé Corretto</option>
    <option>Café Crema</option>
    <option>Caffé Latte</option>
    <option>Caffé macchiato</option>
    <option>Café mélange</option>
    <option>Coffee milk</option>
    <option>Cafe mocha</option>
    <option>Cappuccino</option>
    <option>Carajillo</option>
    <option>Cuban espresso</option>
    <option>Espresso</option>
    <option>The Flat White</option>
    <option>Frappuccino</option>
    <option>Galao</option>
    <option>Greek frappé coffee</option>
    <option>Iced Coffee</option>
    <option>Indian filter coffee</option>
    <option>Instant coffee</option>
    <option>Irish coffee</option>
    <option>Liqueur coffee</option>
</select>

JavaScript

// Create a jqxComboBox
  $("#jqxComboBox").jqxComboBox({
      theme: 'energyblue',
      width: '200px',
      height: '25px',
      selectedIndex: 2
  });
  var updating = false;

  $("#jqxButton").jqxButton({
      theme: 'energyblue'
  });
  $("#jqxButton").click(function () {
      $("#jqxComboBox").jqxComboBox('loadFromSelect', 'select');
  });
  // updates the select's selection.
  $("#jqxComboBox").on('select', function (event) {
      if (event.args && !updating) {
          var args = event.args;
          // select the item in the 'select' tag.
          var index = args.item.index;
          $("#select").val(args.item.value);
      }
  });
  // updates the selection.
  $("#select").on('change', function (event) {
      updating = true;
      var index = $("#select")[0].selectedIndex;
      $("#jqxComboBox").jqxComboBox('selectIndex', index);
      $("#jqxComboBox").jqxComboBox('ensureVisible', index);
      updating = false;
  });