title: Getting other values from lower object/array level
body: <p>I have a working snippet below where if you start typing Cat in the first input, the dropdown populates correctly and if you click on one it fills the first box with the "Name" value, which is right. But how can I get the lower level attributes to fill other inputs as well?</p>
  
  <p>Basically, I want to be able to assign multiple array values in inputs from this object below.</p>
  
  <p>Attributes is at the same level as "name" within source, it's just a new array
  Any help much appreciated</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>$('#productInput').on('input', function() {
    let _this = $(this);
    let foundOption;
    let optSelector = `option[value='${_this.val()}']`;
    if (_this.val() === '') {
      return;
    } else if ($('#returnedProducts').find(optSelector).length) {
     //this one works 
     $("#groupName").val(_this.val());
     
     //I want to fill these with _source.attributes.groupColor and groupCategory
     $("#groupColor").val();
     $("#groupCategory").val();
  
    } else {
  
      const searchResult = $(this).val();
      $("#returnedProducts").empty();
      var result = [{
        _source: {
          "name": "cat",
          attributes:{
             "groupColor": "blue",
             "groupCategory": "Misc",
          },
        },
   
      }, {
        _source: {
          "name": "cat1",
          attributes:{
             "groupColor": "blue",
             "groupCategory": "Misc",
          },
        },
  
      }, {
        _source: {
          "name": "cat2",
          attributes:{
             "groupColor": "blue",
             "groupCategory": "Misc",
          },
        },
  
      }, {
        _source: {
          "name": "cat33",
           attributes:{
             "groupColor": "blue",
             "groupCategory": "Misc",
          },
        },
  
      }];
      for (let i = 0; i &lt; result.length; i++) {
        $("#returnedProducts").append("&lt;option srindex=" + [i] + " value=" + result[i]._source.name + "&gt;" + result[i]._source.name + "&lt;/option&gt;");
  
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input id="productInput" list="returnedProducts"&gt;
  &lt;datalist id="returnedProducts"&gt;&lt;/datalist&gt;
  &lt;input id="groupName"&gt;
  &lt;input id="groupColor"&gt;
  &lt;input id="groupCategory"&gt;</code></pre>
  </div>
  </div>
  </p>