How to make autocomplete email address using Jquery. email-autocomplete?

So today now in this post, i am going to teach you how we can make autocomplete email address by using Jquery. email-autocomplete plugin. We can simple email autocomplete in our PHP, .net or etc application.

Now in this example i will be use the bellow js and css

  1. jquery.js
  2. jquery.email-autocomplete.min.js
  3. bootstrap.min.css

Here I will also use bootstrap for the better layout. So I will create the very simple and the full example so we don’t need to do anything.

Example:
<!DOCTYPE html>
<html>
<head>
	<title>Jquery email autocomplete example</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://raw.githubusercontent.com/10w042/email-autocomplete/master/dist/jquery.email-autocomplete.min.js"></script>


	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<style type="text/css">
		.eac-sugg {
		  color: #ccc;
		}
	</style>

	
</head>
<body>


	<input id="email" name="email" class="form-control" type="email" placeholder="Enter Email" />


	<script type="text/javascript">
		$("#email").emailautocomplete({
		  domains: [
		  	"codingspoint.com",
		  	"gmail.com",
		  	"yahoo.com",
		  	"hotmail.com",
		  	"live.com",
		  	"facebook.com",
		  	"outlook.com",
		  	"gmx.com",
		  	"me.com",
		  	"laravel.com",
		  	"aol.com"]
		});
	</script>


</body>
</html>

Read Also: How to implement infinite ajax scroll pagination in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.