بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اخواني الكرام اليوم باذن الله راح نتعلم كيفية عمل محرك بحث جميل جدا باستخدام PHP و jQuery و MYSQL
كالعادة خلينا نشوف مثال على العملية و ملفات التطبيق متاحة لتحميل ايضا
تحميل الملفات
هنا
لعملها نتبع التالي:
1 - نجهز ملف بمسمى index.php و يكون هذا محتواه
كود Xml / html
اقتباس:
03<head>
04<**** **********="*******-Type" *******="text/html; charset=iso-8859-1" />
05<title>Ajax Tutorial: How to Create Ajax Search Using PHP jQuery and MYSQL</title>
06<script type="text/javascript" src="jquery.js"></script>
07<link rel="stylesheet" type="text/css" media="screen" href="css.css" />
08</head>
09<script ********="javascript">
10$(document).ready(function(){
11$(".searchBtn").click(function(){
12$("#sub_cont").fadeIn(1500).html("<div class='*******'><center ><img src='ajax-loader.gif'/>جاري التحميل</center></div>");
13$("#sub_cont").load("search.php?val=" + $("#search").val());
14});
15});
16</script>
17<body>
18<div class="textBox">
19<input type="text" value="" maxlength="100" name="searchBox" id="search"/>
20<img class="searchBtn" src='search_ico.png'/>
21</div>
22<div id="sub_cont"></div>
23</body>
24</html>
|
ما نلاحظ يجب تضمين ملف مكتبة الجي كواري ضمن الملف بهذا الكود :
كود plain
اقتباس:
|
1<script type="text/javascript" src="jquery.js"></script>
|
و كذالك ضمنا ملف الانماط الانسيابة - لاضافة لمسات تجميلية للعملية بهذا الكود
كود plain
اقتباس:
|
1<link rel="stylesheet" type="text/css" media="screen" href="css.css" />
|
طبعا لازم نعمل ملف ثاني بمسمى css.css و محتواه :
كود css
اقتباس:
01BODY {
02FONT-SIZE: 13px; COLOR: #003399; FONT-FAMILY: Tahoma, Helvetica, Arial, sans-serif;
03
04}
05A {
06 COLOR: #003399; TEXT-DECORATION: none;
07 text-align: right;
08}
09.searchBtn
10 {
11 float:right;
12 cursor ointer;
13 }
14
15
16.textBox input
17 {
18 color:#330000;
19 font: 14px Tahoma;
20 float:right;
21 height:20px;
22 padding:12px 0 0 9px;
23 vertical-align:middle;
24 width:432px;
25 text-align: center;
26 }
27.******* {
28BORDER-RIGHT: #87CEFA 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #fff 1px solid; PADDING-LEFT:4px; BACKGROUND: #EAF4FF repeat-x left top; PADDING-BOTTOM: 4px; BORDER-LEFT: #e0e0e0 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #e0e0e0 1px solid
29;
30float:right;
31text-align: right;
32margin: 2px 0px 2px 0px;
33padding: 5px;
34border: 1px solid #FFCC33;
35width: 432px; clear:both;
36
37}
|