I'm having difficulty setting up a materialize search bar () with autocomplete functionality () on my website.
The issue I'm facing is that the autocomplete feature seems to affect the display of the search icon. When doing a "select all," it becomes apparent that the icon turns white and loses alignment.
Below is how my index.html file looks like at the moment:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</head>
<nav>
<div class="nav-wrapper white">
<form action="results" method="post">
<div class="input-field">
<input class="autocomplete" id="search" name="q" type="search"/>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems, {
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
minLength: 1,
limit:5
});
});
</script>
</html>
I have noticed that when the autocomplete field is empty, the search bar displays correctly.
Has anyone encountered this issue before or knows how to resolve it? Appreciate any help!