Compiling data array to pass to Materialize Autocomplete

Aim: load data from webpage into a javascript array and use this as the data for a Materialize autocomplete. Problem: the information is appropriately loaded into the array, but the autocomplete function is not working with the custom array. I believe this is due to the information in the array being stored incorrectly.

by ojtramp

HTML

<!-- Jquery -->
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  
<!-- Materialize compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Materialize compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
     
<!-- Material Icon Web Font -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">


<!-- Autocomplete html as per documentation -->
  <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete (as per documentation)</label>
        </div>
      </div>
    </div>
  </div>
  
  
  <!-- Custom autocomplete -->
  <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete-input" class="autocomplete-custom">
          <label for="autocomplete-input">Custom Autocomplete (taken from data below)</label>
        </div>
      </div>
    </div>
  </div>
  
<div class="entry_list">

    <label>Entry List</label>
    <p>This information is gathered via javascript into an array. I would then like to use this to populate the autocomplete options of the materialize input.</p>
    <p>The grey chip is an example.</p>
    
    <div class="clearfix"></div>

   <div class="chip grey darken-3">
			 <div class="name">name</div>
			 <div class="id">id</div>
		</div>
    
    <div class="entry chip blue">
			 <div class="name">Apples</div>
			 <div...

CSS

.name, .id {
  display: inline-block;
  color: white;
}
.name {
  border-right: 1px solid white;
  padding-right:8px;
  margin-right:4px;
}
.entry {
  background:blue ;
}
.entry_list, .entry_print_test {
  padding: 20px;
}
.entry_list label {
  margin-bottom: 4px;
}

JavaScript

// Straight from the documentation
$(document).ready(function(){

    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
    });
    
});
  
// Custom code where I am trying to add data from page
$(document).ready(function(){

  entries = [];

  // Gather the info from the page
  $(".entry_list .entry").each( function() {

      name = $(this).find(".name").text();

      // This is where I think I am going wrong somehow!
      // Have tried {name: name, image: null}, {value: name.., {string: name... etc, nothing is working
      entries[name] = null;

  });

  // This confirms that the array isn't empty
  console.log(entries); 
  $("#array_print_out").text(entries);

  $('input.autocomplete-custom').autocomplete({
    data: entries,
  });
  
});