support icon or component for autocomplete

[weasteam]

So, the picture is supported in autocomplete:

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems, options);
  });


  // Or with jQuery

  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
    });
  });
      

It would be great to support an icon or just a component.

Possible Solution

to support an icon

  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'star'
      },
    });
  });

or to support an component

  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": <span class="material-icons">3d_rotation</span>
      },
    });
  });

[samijnih]

:+1:

Thanks for the work on Materialize.

I would suggest to have a better and well designed autocomplete component.

Actually it only supports a matching string as key with its associated picture. It's not enough for me and I guess for all of us.

In my opinion, it's ok for a first framework release but it's not done at all. We have plenty of autocomplete feature components from third party at the moment. They are better than materialize one but they are not materialized design.

So I would love to see new features on that autocomplete component like suggested by @weasteam

If you're wondering what my use case is, then it's pretty simple:

• I want my user to write in an autocomplete input
• I want to call a back-end to retrieve all matching results (it's a collection of resources identified by a unique identifier)
• I need to show all those matching results
• When my user selects a result then I need to know its identifier to perform secondary actions

Actually I'm stuck to the last described step like 1 year ago because of the way your autocomplete component has been designed. Same things for onAutocomplete callback.

Could you please consider improving that component? :pray: :pray: :pray: :pray:

Edit: I'm not front-end expert. I'm a back-end expert so I will not make a pull request for what I am actually describing.