السلام عليكم،
Google Ajax API هي API تتيح استعمال محرك البحث google داخل موقع ما.
أولا يجب أن نحمل ال API
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
ثم نقوم بتحميل المكتبة الخاصة بمحرك البحث، حيث أن هذه ال API تسمح باستعمال مكتبات أخرى مثل Maps API، AJAX Feed API، Google AJAX Language API...
google.load("search", "1");المعطى الأول هو المكتبة التي نريد تحميلها، وفي هذه الحالة استعملنا المكتبة الخاصة بالبحث، والمعطى الثاني هو رقم النسخة version.
بعد ذلك نكتب دالة تقوم بإنشاء كائن SearchControl، هذا الكائن هو ما يظهر للمستعمل ويكون على هذا الشكل
function init() {
var searchControl = new google.search.SearchControl();
//...
}بعد الحصول على الكائن نضيف له المحركات التي نريد البحث فيها، مثلا محرك البحث في الويب أو محرك البحث في الصور أو مقاطع الفيديو ...
function init() {
var searchControl = new google.search.SearchControl();
///////////////////////////////////////////////////////////////////////////////////////////
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.ImageSearch());
searchControl.addSearcher(new google.search.VideoSearch());
///////////////////////////////////////////////////////////////////////////////////////////
//....
}بقي لنا الآن أن نضيف المكون إلى الصفحة. من أجل ذلك ننادي على الطريقة draw ونمرر لها العنصر الذي نريد إضافة المكون داخله
function init() {
var searchControl = new google.search.SearchControl();
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.ImageSearch());
searchControl.addSearcher(new google.search.VideoSearch());
///////////////////////////////////////////////////////////////////////////////////////////
searchControl.draw(document.getElementById("searchcontrol"));
///////////////////////////////////////////////////////////////////////////////////////////
}وفي الأخير نسجل الدالة التي كتبنا ليتم النداء عليها عند تحميل الصفحة، سنستعمل لذلك setonloadCallback
google.setonloadCallback(init);
هذا كود الصفحة بالكامل
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("search", "1");
function init() {
var searchControl = new google.search.SearchControl();
//var options = new google.search.SearcherOptions();
//options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.ImageSearch());
searchControl.addSearcher(new google.search.VideoSearch());
searchControl.draw(document.getElementById("searchcontrol"));
}
google.setOnLoadCallback(init);
</script>
</head>
<body>
<div id="searchcontrol"></div>
</body>
</html>وهذه النتيجة
كما نلاحظ فإن نتائج كل صنف من البحث تظهر تحت بعضها البعض، ماذا لو أردنا إظهار كل صنف في tab لوحده.
يمكننا ذلك باستعمال كائن من الفئة DrawOptions.
أولا ننشئ الكائن
var drawOptions = new google.search.DrawOptions();
ثم نحدد طريقة الرسم التي نريدها، أي استعمال tab لكل صنف
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
ثم عند الرسم نمرر الكائن الذي أنشأنا إلى الطريقة draw
searchControl.draw(document.getElementById("searchcontrol"), drawOptions);الآن الدالة init() أصبحت على الشكل التالي
function init() {
var searchControl = new google.search.SearchControl();
var drawOptions = new google.search.DrawOptions();
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.ImageSearch());
searchControl.addSearcher(new google.search.VideoSearch());
searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
}والنتيجة
لو أردنا تغيير لغة المكون الخاص بالبحث، لجعلها بالعربية بدل الإنجليزية، بمكننا تحديد ذلك عند تحميل المكتبة
google.load("search", "1", {"language" : "ar"});والنتيجة
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("search", "1", {"language" : "ar"});
function init() {
var searchControl = new google.search.SearchControl();
var drawOptions = new google.search.DrawOptions();
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.ImageSearch());
searchControl.addSearcher(new google.search.VideoSearch());
searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
}
google.setOnLoadCallback(init);
</script>
</head>
<body>
<div id="searchcontrol"></div>
</body>
</html>لمزيد من المعلومات، يمكن زيارة الموقع التالي http://code.google.c...h/documentation
ملاحظة: الصفحة html مرفقة، فيها الكود بأكمله، لأنكم ممكن تواجهوا مشكل عند نسخ الكود الموجود هنا مباشرة، لأن محرر المنتدى يحول بعض الحروف من upper case إلى lower case :blink:، خصوصا بالنسبة ل setonloadCallback.
