title: Typeahead, how to fill in hidden input based on another input select?
body: <p>I am having typeahead in one search form I'm working on, and while everything works fine, I'm having a bit of trouble figuring out the problem. It is search for flights and search form should post only specific letters but the input field should fill in the whole name so I need to put specific letters in the hidden field.</p>
  
  <p>Here's an example of what I have.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.typeahead').typeahead({
      source: function (query, process) {
      states = [];
      map = {};
      var data = [{
        DisplayName: '(Eindhoven (EIN))',
        Code: 'EIN',
        Type: 'Airport',
        CityName: 'Eindhoven'
      }];
      $.each(data, function (i, state) {
      map[state.DisplayName] = state;
      states.push(state.DisplayName);
      });
      process(states);
      },
      matcher: function (item) {
      if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
      return true;
      }
      },
      sorter: function (items) {
          return items;//items.sort();
      },
      highlighter: function (item) {
          var regex = new RegExp( '(' + this.query + ')', 'gi' );
          return item.replace( regex, "&lt;strong&gt;$1&lt;/strong&gt;" );
      },
      updater: function (item) {
          SelectedValue = map[item].DisplayName;
          SelectedCode=map[item].Code;
          SelectedType=map[item].Type;
          SelectedCityName=map[item].CityName;
  
          return SelectedCityName+' ('+SelectedCode+')';
      }
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"&gt;&lt;/script&gt;
  &lt;div class="col-md-4 col-sm-6"&gt;
      &lt;label for="let_od"&gt;&lt;small class="text-uppercase text-muted"&gt;&lt;?php _e('Od')?&gt;&lt;/small&gt;&lt;/label&gt;
      &lt;div class="input-group"&gt;
          &lt;div class="input-group-prepend"&gt;
              &lt;div class="input-group-text"&gt;&lt;i class="icon-location-8"&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;input type="text" class="form-control typeahead" data-provide="typeahead" name="let_od" id="let_od" placeholder="(grad ili aerodrom)" autocomplete="off"/&gt;
          &lt;input type="hidden" name="let_od_iso" id="let_od_iso" autocomplete="off" value=""/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-4 col-sm-6"&gt;
      &lt;label for="let_do"&gt;&lt;small class="text-uppercase text-muted"&gt;&lt;?php _e('Do' )?&gt;&lt;/small&gt;&lt;/label&gt;
      &lt;div class="input-group"&gt;
          &lt;div class="input-group-prepend"&gt;
              &lt;div class="input-group-text"&gt;&lt;i class="icon-location-8"&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;input type="text" class="form-control typeahead" data-provide="typeahead" name="let_do" id="let_do" placeholder="(grad ili aerodrom)" autocomplete="off"/&gt;
          &lt;input type="hidden" name="let_do_iso" id="let_do_iso" autocomplete="off" value=""/&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So when i type in anything into one of fields, for example in <code>"let_od"</code> input field, typeahead search and return proper value for that field. Example:<code>(Eindhoven (EIN))</code> but i need only flight code to submit so i need to populate hidden field with only <code>EIN</code> value. 
  Can typeahead populate hidden field too when selected input is filled ?</p>