Materialize Autocomplete Data

programming web dev
1

Hi. I’m looking for anyone familiar with the Materialize framework. I’m using the built in autocomplete function but having trouble getting the data dynamically. The example is shown like this:

$('input.autocomplete').autocomplete({
    data: {
      "Apple": null,
      "Microsoft": null,
      "Google": 'https://placehold.it/250x250'
    },
    limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    onAutocomplete: function(val) {
      // Callback function when value is autcompleted.
    },
    minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
  });

I want to create my own object to use as data:

var itemNames = {};

function getNames() {
      var itemName;
      var itemIndex;
      var items = $('tr');
      for (var i = 0; i < items.length; i++) {
        // itemName = items[i].childNodes[0].innerText;
        // temIndex = items[i].id;
        itemNames[`"${items[i].childNodes[0].innerText}"`] = 'img/md.png';
      }
    }

setTimeout(function(){
     getNames();
   }, 6000);

$('.autocomplete').autocomplete({
      data: itemNames,
      limit: 5, 
      onAutocomplete: function(val) {
        
      },
      minLength: 2
    });

I’m getting this list of names from a table on the page, that is populated from firebase. Two things:

  1. I have to delay the getNames function, otherwise the itemNames object doesn’t populate.

  2. The autocomplete is not hooking up to the itemNames object.

The autocomplete is working if I manually set an object as the data, but it doesn’t like the variable. No errors thrown, just no data being suggested.

Any ideas? I’ve tried setting the data as the function, no dice.

2

Moving the autocomplete function into the setTimeout seems to work. Not sure if there are any long term implications of this when the object gets updated. Will report back.

setTimeout(function(){
     getNames();
     console.log($itemNames);
     $('.autocomplete').autocomplete({ data: $itemNames,
       limit: 5, onAutocomplete: function(val) {}, minLength: 2 });
   }, 2000);
1 Like