English 
{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>جامعة الاسكندرية</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/png" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="http://alexu.edu.eg/22-11/tmp/staffApp/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="http://alexu.edu.eg/22-11/tmp/staffApp/select_style.css">
<script type="text/javascript" src="http://alexu.edu.eg/22-11/tmp/staffApp/js/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function fetch_select(val)
{
$.ajax({
type: 'post',
url: 'http://alexu.edu.eg/22-11/tmp/staffApp/fetch_data_ar.php',
data: {
get_option:val
},
success: function (response) {
document.getElementById("department").innerHTML=response;
}
});
}
</script>
<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://alexu.edu.eg/22-11/tmp/staffApp/ajax-loader.gif"/>');
$.ajax({
type:"post",
url:"http://alexu.edu.eg/22-11/tmp/staffApp/search_ar.php",
encoding:"UTF-8",
data:{"title":title, "fac":fac,"dep":dep,"deg":deg},
success:function(data){
console.log(this.data);
$("#result").html(data);
$("#search").val("");
}
});
}
$("#button").click(function(){
search();
});
$('#search').keyup(function(e) {
if(e.keyCode == 13) {
search();
}
});
});
</script>
</head>
<body>
<p id="heading">أعضاء هيئة التدريس - جامعة الاسكندرية</p>
<center>
<div id="select_box">
<!-- **************************************************************** -->
<input type="text" id="search" placeholder="أكتب أول أحرف من الاسم"/>
<!-- **************************************************************** -->
<select id="facultysapp" onchange="fetch_select(this.value);">
<option>
اختر الكلية
</option>
<?php
$select=mysql_query("select fid, fname_ar from faculties group by fid");
while($row=mysql_fetch_array($select))
{
echo "<option id=".$row['fid'].">".$row['fname_ar']."</option>";
}
?>
</select>
<!-- **************************************************************** -->
<select id="department">
<option>
اختر القسم
</option>
</select>
<!-- **************************************************************** -->
<select id="degree">
<option>
اختر الدرجة العلمية
</option>
<?php
$select=mysql_query("select id, name_ar from degrees group by id");
while($row=mysql_fetch_array($select))
{
echo "<option id=".$row['id'].">".$row['name_ar']."</option>";
}
?>
</select>
<!-- **************************************************************** -->
<input type="button" id="button" value="Search" />
<div>
<ul id="result"></ul>
</div>
</div>
</center>
</body>
</html>
{/source}