materialize
  1. materialize-autocomplete
PreviousNext

Materialize Autocomplete

Autocomplete is a feature in Materialize that displays suggestions as the user types in a search box. It helps the user find relevant items quickly, without having to type the entire search term.

Syntax

To create an autocomplete input field, the input element should have a class of .autocomplete. The data attribute specifies the list of suggestions that will be displayed as the user types.

<div class="input-field">
  <input type="text" id="autocomplete-input" class="autocomplete">
  <label for="autocomplete-input">Enter a word:</label>
</div>

<script>
  var data = {
    "Apple": null,
    "Banana": null,
    "Cherry": null,
    "Date": null,
    "Elderberry": null,
    "Fig": null,
    "Grape": null,
    "Honeydew": null,
    "Indian Prune": null,
    "Jackfruit": null,
    "Kiwi": null,
    "Lemon": null,
    "Mango": null,
    "Nectarine": null,
    "Orange": null,
    "Pineapple": null,
    "Quince": null,
    "Rambutan": null,
    "Strawberry": null,
    "Tangerine": null,
    "Ugli": null,
    "Vanilla Bean": null,
    "Watermelon": null,
    "Xigua": null,
    "Yellow Watermelon": null,
    "Zumaque": null
  };
  var el = document.querySelector('.autocomplete');
  M.Autocomplete.init(el, {data: data});
</script>

Use

Autocomplete is useful for search boxes that have a large number of options or when users may not be familiar with the exact item they're searching for. The feature saves time and effort for users as it provides relevant suggestions as they type.

Importance

Autocomplete helps users quickly find the content they are searching for. It improves the user experience and reduces frustration while searching for specific content. The feature is also beneficial for websites that have a lot of content to search through.

Example

Here's an example of how to use an autocomplete input field in Materialize:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Autocomplete Example</title>

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  </head>
  <body>
    <div class="container">
      <div class="row">
        <form class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="text" id="autocomplete-input" class="autocomplete">
              <label for="autocomplete-input">Enter a word:</label>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
      var data = {
        "Apple": null,
        "Banana": null,
        "Cherry": null,
        "Date": null,
        "Elderberry": null,
        "Fig": null,
        "Grape": null,
        "Honeydew": null,
        "Indian Prune": null,
        "Jackfruit": null,
        "Kiwi": null,
        "Lemon": null,
        "Mango": null,
        "Nectarine": null,
        "Orange": null,
        "Pineapple": null,
        "Quince": null,
        "Rambutan": null,
        "Strawberry": null,
        "Tangerine": null,
        "Ugli": null,
        "Vanilla Bean": null,
        "Watermelon": null,
        "Xigua": null,
        "Yellow Watermelon": null,
        "Zumaque": null
      };
      var el = document.querySelector('.autocomplete');
      M.Autocomplete.init(el, {data: data});
    </script>
  </body>
</html>

Summary

Autocomplete is a Materialize feature that is useful for search boxes that have a large number of options or when users may not be familiar with the exact item they're searching for. Autocomplete saves time and effort for users as it provides relevant suggestions as they type. The feature improves user experience and reduces frustration while searching for specific content.

PreloaderCheckboxes
Published on: