Materialize CSS framework offers the autocomplete option. However, it is not easy for developers to do the autocomplete in the Materialize CSS framework. Many developers failed in the end. This tutorial addresses the autocomplete issue.

In this tutorial, you will use the DevBridge Autocomplete plugin to implement the autocomplete functionality using the Materialize CSS.

In this demo, I used the country list for autocomplete. So first setup the data in the table. You can get the country list data using the below link.

https://github.com/bharathirasa/demo/blob/master/mysql-country-list-codes.sql

The above link offers the SQL code to create a table with data in the MySQL server.

For Oracle, you can use the below link.

https://github.com/bharathirasa/demo/blob/master/oracle-country-list.sql

Now create simple HTML file and include the jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
});
</script>

Then include the Materialize frameworks CSS and js files.

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

Then download and include the DeveBridge autocomplete plugin using the below link.

https://github.com/devbridge/jQuery-Autocomplete/tree/master/dist
 
https://www.devbridge.com/sourcery/components/jquery-autocomplete/

Then create a simple input field and name it country

<div class="row">
<div class="input-field col s6">
<input id="country" type="text" name="country" class="validate">
<label for="country">Search Country here</label>
</div>
</div>

Now add the Devbridge autocomplete code for the input field. 

 

$("#country").devbridgeAutocomplete({
//lookup: countries,
serviceUrl:"getCountry.php", //tell the script where to send requests
type:'POST',
//callback just to show it's working
onSelect: function (suggestion) {
// $('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
},
showNoSuggestionNotice: true,
noSuggestionNotice: 'Sorry, no matching results',
});

Please note. Use devbridgeAutocomplete instead of the autocomplete.

Now create a PHP file and paste the below code.

<?php

require("AmpersandDao.php");

if($_POST)
{

$cname=$_POST['query'];


echo '{"suggestions":'.json_encode( AmpersandDao::getCountry($cname) ).'}';
}

else
{


echo "OOOOOOOOOOOOOOOOOPPPPPPPPPPPPPPPPPSSSSSSSSSSS";
}

?>

By default, the devbridgeAutocomplete plugin uses the query as the parameter name. So you can catch the value using the same if you are not changed the parameter name.

Here AmpersandDao::getCountry($cname) is a separate function, which will query the country table and return the result. You have to write your own PHP code for this step.

That's all. You complete the autocomplete functionality in Materialize CSS framework.

Demo

Full HTML Source Code.

<!DOCTYPE html>
<html>
<head>
	<title>Materialize CSS Ajax Autocomplete Using PHP and DevBridge</title>
	<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">


  <style type="text/css">
  	.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

  </style>
</head>
<body>

<div class="row">
	
	        <div class="col s6 center">
          <h4> Materialize CSS Ajax Autocomplete Using PHP and DevBridge</h4>
        </div>
</div>

      <div class="row">
        <div class="input-field col s6">
          <input  id="country" type="text" name="country" class="validate">
          <label for="country">Search Country here</label>
        </div>

      </div>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
      <script type="text/javascript" src="jquery.autocomplete.min.js" ></script>
      <script type="text/javascript">
      	
      	$(document).ready(function() {
      		

      		      $("#country").devbridgeAutocomplete({
			        //lookup: countries,
			        serviceUrl:"getCountry.php", //tell the script where to send requests
			          type:'POST',
			         
			          
			          //callback just to show it's working
			          onSelect: function (suggestion) {
			             // $('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
			            },
			      	showNoSuggestionNotice: true,
			        noSuggestionNotice: 'Sorry, no matching results',
			      
			      
			      });

      	});

      </script>
</body>
</html>