PHP (Core & Framework)

How to create Auto Filled textbox using AJAX in php from MYSQL


To view the live demo please open url and type kol or starting 3 letters of any city name in the location textbox.

If you want to fill a text box content automatically from the mysql database table using AJAX then use the following code:

Setp 1 – Create a table named “location” with 2 columns – loc_id and city in your mysql database

Input some citi names in this table

Setp 2 – Create one PHP page and add the following code


<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”<html>
<title>Job Platform – Software Jobs, Hardware Jobs, Engineering Jobs, Freshers Jobs</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>

<!– jQuery library –>
<script src=””></script>
<!– jQuery UI library –>
<link rel=”stylesheet” href=””>
<script src=””></script>


<body leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>

<form name=”f1″ method=”post” action=”job_results.php”

<input type=”text” name=”mycity” id=”mycity”> just input first 3 letters of city
<input type=”hidden” name=”loc_id” id=”loc_id”>



$(function() {

$(‘#mycity’).attr(‘autocomplete’, ‘off’);
minLength: 3,
source: “get_city.php”,
select: function( event, ui ) {

Setp 3 – Create another PHP page get_city.php and add the following code into that PHP page.

include(‘connect.php’);  //put your connection code in this file
$searchTerm = $_GET[‘term’];
$sql=”select loc_id, city from location where city like ‘$searchTerm%'”;

$cityData = array();
if(mysql_num_rows($rsCity) > 0)
while($row = mysql_fetch_assoc($rsCity))
$data[‘id’] = $row[‘loc_id’];
$data[‘value’] = $row[‘city’];
array_push($cityData, $data);

// Return results as json encoded array
echo json_encode($cityData);



Comment here