{source}
<?php

include $_SERVER['DOCUMENT_ROOT']."/Apps/db.php";

// Check connection

if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
// Change character set to utf8
mysqli_set_charset($con,"utf8");

?>

<html>
<head>
<title>Alexandria University</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="http://www.alexu.edu.eg/Apps/js/jquery.js"></script>
<script type="text/javascript" src="http://www.alexu.edu.eg/Apps/DataTables/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

<link rel="shortcut icon" type="image/png" href="http://www.alexu.edu.eg/Apps/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="http://www.alexu.edu.eg/Apps/style.css">
<link rel="stylesheet" type="text/css" href="http://www.alexu.edu.eg/Apps/DataTables/css/jquery.dataTables.min.css"/>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>

<script type="text/javascript">
$(document).ready(function(){

function search(){
var title=$("#search").val();

var fac = $("#facultysapp option:selected").attr("id")

var dep = $("#department option:selected").attr("id")

var deg = $("#degree option:selected").attr("id")


$("#result").html('<img alt="ajax search" src="http://www.alexu.edu.eg/Apps/ajax-loader.gif"/>');
$.ajax({
type:"post",
//dataType: "jsonp",
url:"http://www.alexu.edu.eg/Apps/EmpSearch.php",
encoding:"UTF-8",
data:{"title":title, "fac":fac,"dep":dep,"deg":deg},

success:function(data){

$("#result").html(data);

$('#example').DataTable();

$('#example_length').hide();
$('#example_filter').hide();
}
});
}

$("#button").click(function(){
search();
});

$('#search').keyup(function(e) {
if(e.keyCode == 13) {
search();
}
});
});
</script>


</head>

<body>
<p id="heading">Alexandria University Employees</p>
<center>
<div id="select_box" style="overflow-x:auto;">
<!-- **************************************************************** -->
<div id="searchBox">

<input type="text" id="search" placeholder="Type first letters of name"/>

<!-- **************************************************************** -->

<select id="facultysapp">
<option>
Select faculty
</option>

<?php
$select=mysqli_query($con,"select fid, fname_en from faculties group by fid");
while($row=mysqli_fetch_array($select))
{
echo "<option id=".$row['fid'].">".$row['fname_en']."</option>";
}
?>

</select>

<!-- **************************************************************** -->
<input type="button" id="button" value="Search" />
</div>
<hr>
<h4>Search Results</h4>
<hr>
<div id="resultBox">
<table cellspacing="0" width="100%" id="example" class="table table-striped table-hover table-responsive" border="1" frame="void" rules="rows">
<thead>
<tr>
<th>Name</th>
<th>Name in Arabic</th>
<th>Department</th>
<th>Job</th>
<th>Email</th>
<th>Graduate</th>
<th>Degree</th>
<th>Gender</th>
</tr>
</thead>
<tbody id="result">

</tbody>
</table>
</div>
</div>
</center>

</body>
</html>

{/source}