title: Change select drop-down option based on input value using autocomplete in Knockout JS
body: <p>Using Knockout JS, when a user types into an input field and selects a value (ex: Fruit) using jquery-ui autocomplete selection, I'm trying to change the select drop-down of options in a separate drop-down.</p>
  
  <p>Example scenario: 
  (1) User begins to type "Fru.."
  (2) Selects "Fruit" in autocomplete input field.
  (3) Dropdown options changes based on the value: "Fruit"
  (4) Dropdown options only shows "Apples" or other options with equals id (ex: ABC)</p>
  
  <p>Autocomplete Input Field</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input type="text"
      id="searchItem"
      placeholder="Search"
      tabindex="0"
      data-bind="textInput: searchItem, valueUpdate: 'onkeyup'"/&gt;
  </code></pre>
  
  <p><strong>ViewModel/JQuery (Autocomplete)</strong></p>
  
  <pre><code>// Search Item
  $(function() {
      var searchItem = [
          { id: "ABC", name: "Fruit" },
          { id: "DEF", name: "Animal" },
          { id: "GHI", name: "Color" },
          { id: "JKL", name: "Clothing" }
      ];
  
      $("#searchItem").autocomplete({
        source: searchItem
      });
  
   });
  </code></pre>
  
  <hr>
  
  <p><strong>Select dropdown</strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select class="form-control"
          id="alphabetList"
          data-toggle="tooltip"
          tabindex="0"
          data-bind=" foreach: { data: alphabetList, as: 'item' }, value: selectedItem"&gt;
      &lt;option data-bind=" attr: { 'value': item.id }, text: item.name"&gt;&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>ViewModel</strong></p>
  
  <pre><code>// Alphabet List
  this.alphabetList = ko.observableArray([
      { id: "ABC", name: "Apples" },
      { id: "DEF", name: "Dog" },
      { id: "GHI", name: "Green" },
      { id: "JKL", name: "Jacket" }
  ]);
  </code></pre>