jQuery UI Tutorial – Auto Complete Form –

jQuery UI Tutorial – Auto Complete Form –

jQuery UI Tutorial - Auto Complete Form -


 

 

Introduction & Demo

In this video, I’ll show you how to create “Auto Complete Form” using jQuery UI!

First, please check the demo page.

All you need is a text editor!
Enjoy coding:)

 
 

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery Auto Complete</title>
	<style>
		.container {
			margin: 100px auto;
			text-align: center;
		}
		#inputField {
			width: 300px;
			height: 40px;
			font-size: 18px;
		}
	</style>
</head>
<body>
<div class="container">
	<h2>Auto Complete Form</h2>
	<input type="text" id="inputField">
</div>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 
<script>
	$(function(){
		var data = [
			"Cake - Banana",
			"Cake - Carrot",
			"Cake - Strawberry",
			"Candy - Apple",
			"Candy - Orange",
			"Candy - Strawberry",
			"Juice - Apple",
			"Juice - Carrot",
			"Juice - Grape",
			"Juice - Orange"
		];
		
		$("#inputField").autocomplete({
			source:data
		});
		
	});
</script>
</body>
</html>

 

About Sara

Working as a freelance programmer in Japan. I'll try to make coding as simple as possible. Hope you enjoy coding 🙂