Search code examples
materialize

Problem with Materialize chips-autocomplete

I have been trying to get chips autocomplete to work as part of a project.

I have stripped code right back to remove any odd effects and replicated code as on the Materialize site. As in attached code I can get autocomplete to work as expected but not with chips.

I have tried with Chrome and Edge browsers and various combinations of tags and class names but still unable to make it work.

So now I need some help!

What have I missed?

<!DOCTYPE html>
  <html>
  <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container" >
<!-- autocomplete from materialize web site -->
     <div class="row">
        <div class="col s12">
            <div class="input-field col s6">
              <i class="material-icons prefix">textsms</i>
              <input type="text" id="autocomplete-input" class="autocomplete">
              <label for="autocomplete-input">from materialize web site</label>
            </div>
        </div>
      </div>
  
  
<!-- chip autocomplete from materialize web site -->  
    <div class="row">
        <div class="col s6">
            <div id="chips-autocomplete" class="chips chips-autocomplete " ></div>
        </div>
    </div> 
</div>  <!-- container end -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>        
        document.addEventListener('DOMContentLoaded', function() {
                options={"data": {"abel":null,"baker":null,"charlie":null},
                         "placeholder":'fred'}
        console.log (options) 
        var autoElems = document.querySelectorAll('.autocomplete');
        var attemptElems = document.getElementById("attempt");
        var chipsElems = document.getElementById("chips-autocomplete");

        var auto = M.Autocomplete.init(autoElems, options);
        var chips = M.Chips.init(chipsElems, options);
        });
    </script>
</body>
</html>
Solution

  • The data init for chips-autocomplete is incorrect. From the docs:

      $('.chips-autocomplete').chips({
    autocompleteOptions: {
      data: {
        'Apple': null,
        'Microsoft': null,
        'Google': null
      },
      limit: Infinity,
      minLength: 1
    }
  });

    With Vanilla JS:

    document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.chips-autocomplete');
    var instances = M.Chips.init(elems, {
        autocompleteOptions: {
          data: {
            'Apple': null,
            'Microsoft': null,
            'Google': null
          },
          limit: Infinity,
          minLength: 1
        }
      });
  });

    you are simply setting data (in quotes, when there should be no quotes). It should be autocompleteOptions as an object, and then data inside this.