البحث الفوري والإقتراحات التلقائية اجاكس ~ الدليل

الحمد لله رب العالمين ، والصلاة والسلام على سيّدنا محمد الصادق الوعد الأمين ، اللهم لا علم لنا إلا ما علَّمْتنا إنك أنت العليم الحكيم اللهم علِّمنا ما ينْفعنا وانْفعنا بِما علَّمتنا وزِدْنا عِلما ، وأَرِنا الحق حقاً وارْزقنا اتِّباعه وأرِنا الباطل باطِلاً وارزُقنا اجْتنابه ، واجْعلنا ممن يسْتمعون القول فَيَتَّبِعون أحْسنه وأدْخِلنا برحْمتك في عبادك الصالحين .

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

اليوم بإذن الله سنتعلم كيفية عمل اقتراحات تلقائية او بحث سريع بالاجاكس

وإذا كنت لا تعرف الاجاكس فهذا شيئ بسيط سنتعلمه

ولكن قبل البدء

سنفكر كيف سنقوم بلك

في البداية فلنفرض انك في حياتك العملية تبحث عن مكان ولنفرض مطعم في احد الشوارع فبكل بساطة تسأل اي شخص عن المطعم الفلاني وسيجيبك

فلنفكر بهذا المثال ولنقارنة بالاجاكس

اول شيئ انت في البحث تحتاج الى 3 امور وهي الشخص والسؤال والاجابة

والاجاكس نفس الشيئ تحتاج الى 3 امور وهي

صفحة التي سوف تسال بها

والسؤال

والجواب او الرد

نقول بسم الله ونبدء في البداية ليكن لدينا الصفحة التالية

البحث الفوري - الإقتراحات التلقائية بلأجاكس ( ببساطة )

تحميل الملفات

لدينا في هذه الصفحة خانة للبحث وهي عبارة عن input عادي اعطيناه id="Search"

وضمنا مكتبة الجيكويري

رمز PHP:

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

الان نحتاج الى ملف لكتابة كود الاجاكس وملف php خاص للمعالجة ورد النتيجة

سنبدء في ملف كود الجافا سكريبت الخاص بالاجاكس

سنقوم بإنشاء ملف search.js وتضمينه

رمز PHP:

<script type="text/javascript" src="js/search.js"></script>

في البداية نفكر انه متى سيبدء البحث ؟؟

لدينا في الجيكويري 3 احداث وهي keyup,keydown,keypress

نختار الذي نريد انا سوف اختار keyup

وسنقوم بفتح كود الجيكويري

رمز PHP:

$(function (){

});

ونضع الحدث الضغط للحقل input

رمز PHP:

$(function (){

$('#Search').keyup(function (){

});

});

حسننا

الان لنخرج قليلا من الكود ولنشرح دالة Ajax

Ajax دالة جاهزة في الجيكويري تحتاج الى الامور 3 التي ذكرناها سابقا

رمز PHP:

url

وهي التي سنحدد بها الصفحة التي ستتم بها المعالجة

وتكتب هكذا

رمز PHP:

url:"look4.php",

ولا ننسى الفاصلة في النهاية

ونحتاج الى تحديد نوع الارسال اذا كان مخفي او عبر رابط الصفحة وهنا تحدد نوعية البيانات نوع الارسال

نحتاج هنا الى البيانات التي سوف نرسلها اي مثل سؤالنا عن المطعم فنحن هنا نرسل كلمة المطعم

وذلك يتم بعدة طرق

سوف اقول بالارسال بأفضل الطرق عبر JSON

وبكل بساطة ولنرى كيف

في البداية سنقوم بانشاء متحول يجلب لنا قسمة الحقل المدخل اي

input

وذلك عن طريق val

رمز PHP:

var what = $('#Search').val();

الان جلبنا القيمة واصبحت قيمة المتحول what هي الشيئ المراد البحث عنه

لنرسل عبر ال jSON

رمز PHP:

var datea = {"whatserach":what}

وهنا قمنا بانشاء متحول اسندنا اليه قيمة ال what

ويجب ان ننتبه ان ما سميناه واقصد هنا ال whatserach هو ما سنقوم بالاستعلام بلغة البرمجة عنه

الان نرسل الكلمة المراد البحث عنها ضمن متحول الذي انشئناه عبر ال json

رمز PHP:

data:datea,

الان نترك الدالة الاخيرة لبعد قليل

لنذهب ونكتب ملف php الخاص بالبحث الذي وضعناه في url

رمز PHP:

url:"look4.php",

الكود :

رمز PHP:

<?php

$ax = mysql_connect('localhost','root','123')or die(mysql_error());mysql_select_db('site',$ax)or die(mysql_error());






 $word = $_POST['whatserach'];

 //echo $word = $_POST['whatserach'];if(isset($word) && $word != ''){$whats= "select name,id from android where name LIKE '%$word%'";$query = mysql_query($whats) or die(mysql_error());

echo "'<li><a style='color:blue'>Found&nbsp;&nbsp;".mysql_num_rows($query)."&nbsp;&nbsp; Result</a></li>";//echo '<li><a></a></li>';while($loop = mysql_fetch_object($query))




{

    echo '<li><a href="index.php?id='.$loop->id.' "> '.$loop->name.' </a></li>';




}

}?>