title: Fill an input based on other input
body: <p>I have a form with 2 inputs, where the 1st input has a <code>datalist</code> attribute.</p>
  
  <pre><code> &lt;div class="col-xs-4"&gt;
       &lt;input name="description" type="text" id="ajax" list="json-datalist"&gt;
       &lt;datalist id="json-datalist"&gt;&lt;/datalist&gt;
    &lt;/div&gt;
  
    &lt;div class="col-xs-2"&gt;
        &lt;input type="text" name="product" /&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>the JSON file has this format</p>
  
  <pre><code>[ {
          "product":"1235",
          "description":"description 1"
        },
        {
          "product":"1325",
          "description":"description 2"
        }, 
        ...
    ]
  </code></pre>
  
  <p>What I want is when the user selects one of the <code>description</code>, then the <code>product</code> to be added in the 2nd input..</p>
  
  <p>here is the code for the javascript where loads the JSON file to the form</p>
  
  <pre><code>var dataList = document.getElementById('json-datalist');
      var input = document.getElementById('ajax');
      var request = new XMLHttpRequest();
  
      request.onreadystatechange = function(response) {
        if (request.readyState === 4) {
          if (request.status === 200) {
            // Parse the JSON
            var jsonOptions = JSON.parse(request.responseText);
  
            // Loop over the JSON array.
            jsonOptions.forEach(function(item) {
              // Create a new &lt;option&gt; element.
              var option = document.createElement('option');
              // Set the value using the item in the JSON array.
              option.value = item.description; 
                                                 //&lt;--
              // Add the &lt;option&gt; element to the &lt;datalist&gt;.
              dataList.appendChild(option);
            });
  
            // Update the placeholder text.
            input.placeholder = "e.g. datalist";
          } else {
            // An error occured :(
            input.placeholder = "Couldn't load datalist options :(";
          }
        }
      };
  
      // Update the placeholder text.
      input.placeholder = "Loading options...";
  
      // Set up and make the request.
      request.open('GET', 'myfile.json', true);
      request.send();
  </code></pre>
  
  <p>How can I add the <code>item.product</code> as a value to the second input, when the <code>item.description</code> is selected?</p>