ajax live search تنزيل - ajax live search تنزيل كود المصدر

ajax live search

شفرة المصدر الأخرى

version - Version 3.1

تنزيل

أجاكس البحث المباشر

*** لم يعد يتم الحفاظ على هذا بعد الآن *** لقد بدأت هذا المشروع منذ بضع سنوات، ولكن تم تغيير الكثير حتى الآن. أيضًا، نظرًا للاقتران بين الطبقات المختلفة، وكذلك التقنيات القديمة (jQuery!) فإن هذا ليس مشروعًا قابلاً للتطوير. شكرًا جزيلاً على كل الدعم ولكن للأسف لا بد لي من أرشفة هذا المشروع :(

AJAX Live Search هو مكون إضافي لـ jQuery / نموذج بحث PHP يبحث ويعرض النتيجة أثناء الكتابة على غرار ميزة الإكمال التلقائي من Google.

تجريبي

التحقق من ذلك في العمل.

دعم المتصفح


آي إي 8+ ✔	كروم✔	فايرفوكس ✔	الأوبرا ✔	سفاري✔

شكرًا لـ BrowserStack وJetBrains لدعم هذا المشروع.

البدء باستخدام Ajax Live Search

يجب ألا يستغرق تشغيل المثال الحالي في index.php بما في ذلك إنشاء قاعدة بيانات وهمية وجدول، أكثر من 7 دقائق. لكن الأمر سيستغرق المزيد في حالة احتياجك إلى دمجه في مشروع حالي. لتحقيق ذلك بافتراض أن لديك حقل النص هذا:

<input type="text" class='mySearch' id="ls_query" placeholder="Type to start searching ...">

انسخ المجلدات بما في ذلك core و css font و img و js templates إلى مشروعك.
حدد التكوينات المطلوبة وخاصة تكوينات قاعدة البيانات في core/Config.template.php وأعد تسمية الملف إلى Config.php . يحتوي هذا الملف على جميع إعدادات الواجهة الخلفية للمكون الإضافي التي تم شرحها في جدول PHP Configs.
قم بتضمين js/ajaxlivesearch.min.js أو js/ajaxlivesearch.js و css/ajaxlivesearch.min.css أو css/ajaxlivesearch.css في صفحتك.
قم بتغيير عنوان URL لرأس Access-Control-Allow-Origin header في core/AjaxProcessor.php إلى عنوان URL لمشروعك. حاليا هو https://ajaxlivesearch.com .
تأكد من تضمين core/Handler.php و core/Config.php في صفحة (PHP) الخاصة بك وأن لديك هذه السطور في أعلى الملف (راجع index.php ):
```
 use AjaxLiveSearchcoreConfig;
use AjaxLiveSearchcoreHandler;

if (session_id() == '') {
    session_start();
}

$handler = new Handler();
$handler->getJavascriptAntiBot();
```
أخيرًا، قم بربط المكون الإضافي بحقل النص وتمرير الخيارات المطلوبة (loaded_at & token):

jQuery("#ls_query").ajaxlivesearch({ Loaded_at: , token: getToken() . "'"; ?>, max_input: , }); ```

يمكنك أيضًا نشر معلمات إضافية على الخادم إذا كنت بحاجة إلى ذلك. لتحقيق ذلك يجب عليك إضافة سمات data إلى مدخلات البحث:

 <input type="text" class='mySearch' id="ls_query" placeholder="Type to start searching ..." data-additionalData="hello world!">

على سبيل المثال، في هذه الحالة يمكنك الوصول إلى سمة البيانات في PHP مثل هذا:

 // key is transformed to lowercase
$additionalData = $_POST['additionaldata'];

خيارات مسج

اسم	يكتب	مطلوب	وصف
Load_at	عدد صحيح	نعم	يُستخدم هذا لمنع الروبوتات من البحث.
رمز مميز	خيط	نعم	يستخدم هذا لمنع هجوم CSRF.
عنوان URL	خيط	لا	الافتراضي: ajax/process_livesearch.php.
مخبأ	منطقية	لا	يشير هذا إلى التخزين المؤقت لطلبات Ajax. الافتراضي: خطأ
form_anti_bot	خيط	لا	الافتراضي: ajaxlivesearch_guard
سرعة الشريحة	خيط	لا	الافتراضي: سريع
type_delay	عدد صحيح	لا	الافتراضي: 350
max_input	عدد صحيح	لا	الافتراضي: 20
min_chars_to_search	عدد صحيح	لا	الحد الأدنى لطول الأحرف لبدء البحث. الافتراضي: 0
page_ranges	صفيف	لا	الافتراضي: [0، 5، 10]
page_range_default	عدد صحيح	لا	الافتراضي: 5
form_anti_bot_class	خيط	لا	الافتراضي: ls_anti_bot
footer_class	خيط	لا	الافتراضي: ls_result_footer
next_page_class	خيط	لا	الافتراضي: ls_next_page
Previous_page_class	خيط	لا	الافتراضي: ls_previous_page
page_limit	خيط	لا	الافتراضي: page_limit
result_wrapper_class	خيط	لا	الافتراضي: ls_result_div
result_class	خيط	لا	الافتراضي: ls_result_main
حاوية_فئة	خيط	لا	الافتراضي: ls_container
pagination_class	خيط	لا	الافتراضي: ترقيم الصفحات
form_class	خيط	لا	الافتراضي: البحث
Load_at_class	خيط	لا	الافتراضي: ls_page_loaded_at
token_class	خيط	لا	الافتراضي: ls_token
current_page_hidden_class	خيط	لا	الافتراضي: ls_current_page
current_page_lbl_class	خيط	لا	الافتراضي: ls_current_page_lbl
last_page_lbl_class	خيط	لا	الافتراضي: ls_last_page_lbl
Total_page_lbl_class	خيط	لا	الافتراضي: ls_last_page_lbl
page_range_class	خيط	لا	الافتراضي: ls_items_per_page
navigation_class	خيط	لا	الافتراضي: الملاحة
Arrow_class	خيط	لا	الافتراضي: السهم

حدث مخصص

اسم
onResultClick
onResultEnter
onAjaxComplete

مثال:

 jQuery(".mySearch").ajaxlivesearch({
    loaded_at: <?php echo time(); ?>,
    token: <?php echo "'" . $handler->getToken() . "'"; ?>,
    max_input: <?php echo Config::getConfig('maxInputLength'); ?>,
    onResultClick: function(e, data) {
        // get the index 1 (second column) value
        var selectedOne = jQuery(data.selected).find('td').eq('1').text();

        // set the input value
        jQuery('#ls_query').val(selectedOne);

        // hide the result
        jQuery("#ls_query").trigger('ajaxlivesearch:hide_result');
    },
    onResultEnter: function(e, data) {
        // do whatever you want
        // jQuery("#ls_query").trigger('ajaxlivesearch:search', {query: 'test'});
    },
    onAjaxComplete: function(e, data) {

    }
});

الزناد المخصص

اسم
ajaxlivesearch:hide_result
ajaxlivesearch:search

تكوينات PHP

اسم

يكتب

مطلوب

وصف

مصادر البيانات

صفيف

نعم

مصدر البيانات لكل حقل نص البحث. تشير المفاتيح إلى معرف HTML للحقل. يتم حاليًا دعم MySQL وmongoDB (هذا في مرحلة تجريبية).

تكوينات مصدر بيانات MySQL:

اسم	يكتب	مطلوب	وصف
يستضيف	خيط	نعم	مضيف قاعدة بيانات MySQL. عادة ما يكون "المضيف المحلي".
قاعدة البيانات	خيط	نعم	اسم قاعدة بيانات MySQL.
اسم المستخدم	خيط	نعم	اسم مستخدم قاعدة بيانات MySQL.
يمر	خيط	نعم	كلمة مرور اسم مستخدم قاعدة بيانات MySQL.
طاولة	خيط	نعم	جدول قاعدة بيانات MySQL الذي يبحث فيه البحث المباشر.
أعمدة البحث	صفيف	نعم	أعمدة البحث التي يبحث فيها البحث المباشر. يمكن أن تكون عمودًا واحدًا أو أكثر. على سبيل المثال، صفيف ('column_name_1'، 'column_name_2')
orderBy	خيط	لا	العمود الذي يتم ترتيب النتيجة فيه.
orderDirection	خيط	لا	اتجاه الطلب: "ASC" أو "DESC" لـ "orderBy". القيمة الافتراضية: ASC
filterResult	صفيف	لا	الأعمدة التي يجب أن تكون في النتيجة. إذا كان فارغاً سيتم إرجاع كافة الأعمدة.
com.compareoperator	خيط	نعم	عامل مقارنة استعلام البحث. القيم المحتملة لعوامل المقارنة هي: 'LIKE' و'='.
searchPattern	خيط	نعم	يُستخدم هذا لتحديد كيفية البحث في الاستعلام. القيم المحتملة هي: `q`، `q`، `q`، `q`.
حساسية الموضوع	خيط	نعم	حساسية حالة استعلام البحث
maxResult	عدد صحيح	لا	يستخدم هذا لتحديد الحد الأقصى لعدد النتائج.
this.displayHeader	صفيف	لا	يُستخدم هذا لعرض أو إخفاء الرأس في النتيجة. إذا تم تعيين "نشط" على الرأس الحقيقي، فسيتم عرضه. ومن الممكن أيضًا تعيين الأعمدة لعناوين مختلفة.
يكتب	خيط	نعم	نوع مصدر البيانات. القيم الممكنة حاليًا هي: "mysql" أو "mongo".

antiBot

خيط

نعم

يتم استخدام هذا كأسلوب أمان لمنع عمليات إرسال النماذج من تلك الروبوتات التي لا تستخدم JavaScript. في هذه التقنية، يتم ملء حقل مخفي باستخدام jQuery بهذه القيمة. يمكن أن يكون له أي قيمة، ولكن يجب أن يكون نفس خيار `form_anti_bot` الذي تم تمريره إلى المكون الإضافي jQuery. افتراضيًا، يتم تعيينه على `ajaxlivesearch_guard`.

searchStartTimeOffset

عدد صحيح

نعم

يُستخدم هذا لأسلوب أمان آخر ضد الروبوتات. تقوم بعض الروبوتات بإرسال نموذج على الفور بمجرد الانتهاء من تحميل الصفحة. ومع ذلك، بالنسبة للبشر، يستغرق الأمر وقتًا أطول لملء الحقل. افتراضيًا، يتم تعيين هذه المعلمة على 3 ثوانٍ. لا ينصح بتعيين أكثر من 3 ثوان.

maxInputLength

عدد صحيح

نعم

يحدد هذا الحد الأقصى لطول الأحرف في حقل البحث.

نموذج

خيط

نعم

يحدد هذا اسم القالب الموجود في مجلد القوالب

التعليمات

ما هي المخاطر في تعطيل anti_bot والرمز المميز؟
تعد form_anti_bot ميزة أمان رائعة ولكن يجب إزالتها. لتحقيق ذلك، تحتاج إلى تغيير validateRequest() في core/AjaxProcessor.php وإزالة $_POST['ls_anti_bot'] بالإضافة إلى تغيير verifySessionValue($sessionParameter, $sessionValue) في core/Handler.php . في المقابل، تسمح إزالة token لأي شخص بإنشاء نموذج واستخدام الخادم الخاص بك كمصدر للبيانات وبالتالي لا يوصى بذلك. حاليًا، في كل مرة يتم فيها تحميل الصفحة/نموذج البحث، يتم إنشاء رمز مميز جديد عن طريق استدعاء getToken() في صفحة النموذج ( index.php في المثال الحالي). ثم يتم التحقق من الرمز المميز وanti_bot باستخدام verifySessionValue($sessionParameter, $sessionValue) عند البحث/إرسال طلب جديد إلى الخادم. إذا كان هذا يبدو مبالغة بالنسبة لك، في getToken() قم بإرجاع نفس الرمز المميز للجلسة الحالية.
كيف يمكن إخفاء عمود في النتيجة؟
يمكن تحقيق ذلك في القالب الخاص بك. يمكن العثور على مثال في templates/hiddenColumn.php