استعلام Ajax في ووردبريس باستخدام Select2 لجلب البيانات من قاعدة البيانات

قد يكون تحميل البيانات من قاعدة بيانات إلى واجهة مستخدم تعتمد على تقنيات جافا سكريبت مثل JQuery Select2 باستخدام أسلوب Ajax أحد أكثر الميزات إثارة في تطوير التطبيقات الحديثة. في هذا المقال، سنستعرض كيفية استخدام Wordpress Select2 Ajax query call data from DB لجعل تجربة المستخدم أكثر سلاسة وسرعة.

إعداد الأجزاء الأساسية في Wordpress

للبدء، يجب أولاً تجهيز وظيفة لتحميل المكتبات اللازمة إلى موقع Wordpress الخاص بك. يمكن تحقيق ذلك عن طريق إضافة الوظيفة التالية إلى ملف functions.php:

function enqueue_select2() {
    wp_enqueue_style('select2-css', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css');
    wp_enqueue_script('select2-js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_select2');

هذه الدالة تضيف ملفات CSS و JavaScript اللازمة لمكتبة Select2 إلى الصفحة.

إنشاء استعلام البيانات من قاعدة البيانات

بعد ذلك، سوف نحتاج إلى وظيفة لاسترجاع البيانات من قاعدة البيانات بناءً على مدخلات المستخدم. إليك نموذج دالة يمكنك استخدامها لتحقيق ذلك:

function get_locations_for_select2() {
    global $mysqli; // استخدم الاتصال بقاعدة البيانات
    $searchTerm = $_GET['searchTerm']; // الحصول على مصطلح البحث
    $sql_loc = "SELECT t.term_id, t.name as term_name, slug 
                FROM wplw_terms t 
                INNER JOIN wplw_term_taxonomy tax ON tax.term_id = t.term_id 
                WHERE taxonomy = 'at_biz_dir-location' AND slug LIKE '%-state' AND t.name LIKE '" . $mysqli->real_escape_string($searchTerm) . "%' 
                ORDER BY t.name ASC 
                LIMIT 20;";
    $results = $mysqli->query($sql_loc);
    $data = [];
    if ($results->num_rows > 0) {
        while ($row = $results->fetch_assoc()) {
            $data[] = array("id" => $row['term_id'], "text" => $row['term_name']);
        }
    }
    echo json_encode($data);
}

تكوين استدعاء Ajax من جانب العميل

بعد ضبط استعلام قاعدة البيانات، نحتاج الآن إلى إعداد الجوانب المتعلقة بالجانب العميل. يمكنك إضافة الكود التالي داخل عنصر Elementor حيث تريد عرض القائمة المنسدلة:

<select id="location-select" style="width: 100%">
    <option value="">اختر الموقع</option>
</select>
<script>
jQuery(document).ready(function($) {
    $('#location-select').select2({
        placeholder: "اختر الموقع",
        ajax: {
            url: '<?php echo admin_url("admin-ajax.php"); ?>',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    searchTerm: params.term // تمرير مصطلح البحث إلى الخادم
                };
            },
            processResults: function (data) {
                return {
                    results: data
                };
            },
            cache: true
        },
        minimumInputLength: 1 // الحد الأدنى من المدخلات للبحث
    });
});
</script>

بعض النقاط المهمة

من المهم التأكد من تمرير مصطلح البحث $searchTerm من جانب العميل إلى الخادم عبر Ajax. هذا يسمح لك بتنفيذ الاستعلام بشكل ديناميكي بناءً على إدخالات المستخدم. في الكود أعلاه، يتم تمرير مصطلح البحث المدخل إلى $searchTerm باستخدام params.term، مما يتيح لك التعامل مع البيانات بشكل أكثر كفاءة.

خاتمة

باستخدام تشكيلات Ajax و Select2 في Wordpress، يمكن لمطوري الويب تحقيق تجربة مستخدم مميزة وسريعة. استنادًا إلى ما تم شرحه، يُمكنك facilmente تجهيز قائمة منسدلة تعتمد على البيانات من قاعدة البيانات وتحسين قابلية الاستخدام بشكل كبير. إن استخدام تقنيات مثل هذه يسهل الكثير من الأمور ويعزز من كفاءة وتفاعل المستخدمين مع موقعك على الإنترنت.