كيفية إنشاء محرك Ajax Search

~~السلفي الأثري~~ · 2010-07-09, 09:08

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

اخواني الكرام اليوم باذن الله راح نتعلم كيفية عمل محرك بحث جميل جدا باستخدام PHP و jQuery و MYSQL
كالعادة خلينا نشوف مثال على العملية و ملفات التطبيق متاحة لتحميل ايضا

تحميل الملفات هنا

لعملها نتبع التالي:

1 - نجهز ملف بمسمى index.php و يكون هذا محتواه

كود Xml / html

اقتباس:

01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02<html xmlns="https://www.w3.org/1999/xhtml">

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}