Materialize CSS Demo
Materialize Code
Output
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/js/materialize.min.js"></script> </head> <body> <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": '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> </body> </html>
textsms
Enter a Letter