The Autocomplete component in Materialize

The Materialize has a built-in component for creating the autocomplete box. So, as a user types in a letter in a textbox, the recommendations based on entered letters display with a style.

The list of words can be provided in the jQuery code by using an array or by JavaScript. The suggestions can also be populated dynamically.

A demo of auto-complete

The autocomplete feature requires using an input typ=text field and using the autcomplete class. A little jQuery/JavaScript is required for initializing and providing the suggestions. See an example by clicking the link or image below and enter any of the characters in these words: JavaScript, Java, jQuery, Python etc.

materialize auto complete

Online demo

The markup:

<div class="container">

 <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="demo-auto" class="autocomplete">

          <label for="demo-auto">Enter a Letter</label>

        </div>

      </div>

    </div>

  </div>

</div>

The jQuery code:

<script>

  $(document).ready(function(){

    $('input.autocomplete').autocomplete({

      data: {

        "jQuery": null,

        "JavaScript": 'https://www.jquery-az.com/wp-content/uploads/2017/12/favicon-32x32.png',

        "CSS": null,

        "HTML": null,

        "Bootstrap": 'https://www.jquery-az.com/wp-content/uploads/2017/12/favicon-32x32.png',

        "Java": null,

        "Python": null,

      },

    });

  });

</script>

In the data option, you may provide the suggestions for autocomplete with a name to display along with its icon. The icon is optional, for example:

“JavaScript”: ‘https://www.jquery-az.com/wp-content/uploads/2017/12/favicon-32×32.png’

Using the limit option example

If you have a long list of suggestions that may go beyond the available desired space, you may limit the number of suggestions to appear in the auto-complete box.

For that, use the limit option in the jQuery code with required number. For example:

limit: 3

To demonstrate that, I have created the array of auto complete values as shown in the code below. If you enter ‘a’, four suggestions should be displayed. However, as limit option is set as 3, so it will display only 3 suggestions. Have a look:

materialize auto limit

The code:

<div class="container">

 <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="demo-auto" class="autocomplete">

          <label for="demo-auto">Enter a Letter</label>

        </div>

      </div>

    </div>

  </div>

</div>



<script>

  $(document).ready(function(){

    $('input.autocomplete').autocomplete({

      data: {

        "jQuery": null,

        "JavaScript": null,

        "CSS": null,

        "Angular JS": null,

        "Node": null,

        "Git": null,

        "HTML": null,

        "Bootstrap": null,

        "Java": null,

        "Python": null,

        "PHP": null,

        ".Net": null,

       

      },

      limit: 3

    });

  });

</script>

The autocomplete Materialize component has more options that you may learn here.