<!DOCTYPE html>
<html>
<head>
<link href="http://www.freetimelearning.com/images/favicon.png" rel="shortcut icon" type="image/x-icon" />
<title>Ajax with PHP / MYSQL</title>
</head>
<style type="text/css">
label{
font-size:12px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
padding:5px 0px 0px;
margin:1px 0px;
clear:both;
}
.form-control{
height:20px;
width:250px;
margin:2px 0px;
border-radius:2px;
border:1px solid #CCC;
padding:5px 15px;
}
</style>
<link rel="stylesheet" type="text/css" href="http://www.freetimelearning.com/css/jquery-ui.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<body>
<form action="" method="post">
<label>State or City</label><br/>
<input type="text" class="form-control state" placeholder="State or City" name="state_city[]" value="" />
</form>
<!-- States-->
<script type="text/javascript">
$(document).on("focus", "input.state", function () {
$('.state').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax_states.php',
dataType: "json",
data: {
name_startsWith: request.term
},
success: function( data ) {
response(data);
}
});
},
autoFocus: true,
minLength: 1
});
});
</script>
<!-- End States-->
</body>
</html>