title: Autofilling an input field using JQuery
body: <p>I have the following form:</p>
  
  <pre><code>&lt;form method='post' id='myform'&gt;
  
      &lt;div class="typeahead__container"&gt;
          &lt;div class="typeahead__field"&gt;
              &lt;input type="text" class="item" placeholder="Item" id='item' name='input_val'&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;input type="text" class="id" placeholder="ID" id='item-id' name='input_val'&gt;
  
      &lt;button name="button" type="submit" class="btn btn-primary btn-sm f-14 mr-1"&gt;SUBMIT&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And the following function to handle live search:</p>
  
  <pre><code>$(document).ready(function(){
  
    // Defining the local dataset
    $.getJSON('http://127.0.0.1:8000/tst/', function(data) {
      console.log(data)
  
      let data = {
          "results": [
            { "item": "First",  "id": "1847" },
            { "item": "Second", "id": "4442" },
            { "item": "Third",  "id": "3847" }
          ]
      };
  
      //LIVE-SEARCH
      $(() =&gt; {
  
        $('#item').typeahead({
          source: {
            data: data.results.map(record =&gt; record.item)
          },
          callback: {
            onInit: function($el) {
              console.log(`Typeahead initiated on: ${$el.prop('tagName')}#${$el.attr('id')}`);
            }
          }
        });
  
      });
      //END LIVE-SEARCH
  
    });
  });
  </code></pre>
  
  <p>I want to add another function to fill the default value of the input field <code>item-id</code> according to what the user chooses on the input field <code>item</code>. So, for example, if the user writes <code>First</code>, JQuery should set the default value of <code>item-id</code> to <code>1847</code> (see my previous block of code).</p>
  
  <p>How can i do that? Am i supposed to do that inside my live search function or should i use another function?</p>