"الباحث الفوري" لنسخة AwesomeBB مع معاينة للمواضيع

[كود جيفري]

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

مثال على الكود​

شرح تركيب الكود​

خطوات التركيب
ادخل إلى لوحة إدارة منتداك، وانتقل إلى: عناصر إضافية ← HTML و JAVASCRIPT ← إدارة أكواد Javascript، ثم اضغط على "إنشاء كود Javascript جديد" واملأ الحقول التالية:
العنوان: اختر عنوانًا مناسبًا مثل "الباحث الفوري"
الصلاحيات: للجميع
مكان وضع الكود: في جميع الصفحات

$(function() {
    var $searchInput = $('#search-main input[name="search_keywords"]');
    if ($searchInput.length === 0) return;

    var $resultsDropdown = $('<div class="live-search-dropdown"></div>');
    var previewModalHTML = 
        '<div id="search-preview-modal" class="preview-modal-overlay">' +
        '  <div class="preview-modal-container">' +
        '    <div class="preview-modal-header">' +
        '      <span class="preview-modal-title"></span>' +
        '      <span class="preview-modal-close">&times;</span>' +
        '    </div>' +
        '    <div class="preview-modal-content">' +
        '      <div class="preview-loader"></div>' +
        '    </div>' +
        '    <div class="preview-modal-footer">' +
        '      <a href="#" class="preview-modal-action-btn">الانتقال إلى الموضوع الكامل &larr;</a>' +
        '    </div>' +
        '  </div>' +
        '</div>';
    $('body').append($resultsDropdown, previewModalHTML);
   
    var $previewModal = $('#search-preview-modal');

    var sCSS = '<style>' +
        '.live-search-dropdown { position: absolute; display: none; background-color: #2F2F2F !important; border: 1px solid #555 !important; border-radius: 4px; z-index: 10000; box-shadow: 0 4px 8px rgba(0,0,0,0.3); overflow-y: hidden; }' + 
        '.live-search-dropdown::-webkit-scrollbar { width: 5px; }' +
        '.live-search-dropdown::-webkit-scrollbar-track { background: #2F2F2F; }' +
        '.live-search-dropdown::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }' +
        '.ls-result-item { display: block; color: #DDDDDD; text-decoration: none; padding: 8px 12px; border-bottom: 1px solid #444; cursor: pointer; transition: background-color 0.2s, color 0.2s; }' +
        '.ls-result-item:last-child { border-bottom: none; }' +
        '.ls-result-item:hover { background-color: #4A4A4A; color: #ffffff; }' +
        '.ls-result-title { font-weight: bold; font-size: 13px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }' +
        '.ls-result-meta { font-size: 11px; color: #AAAAAA; }' +
        '.ls-result-meta > span { margin: 0 1px; }' +
        '.ls-result-meta .meta-separator { color: #666; margin: 0 5px; }' +
        '.meta-label-author { color: #87CEEB; }' +
        '.meta-label-cat { color: #98FB98; }' +
        '.meta-label-replies { color: #F0E68C; }' +
        '.meta-value { color: #FFFFFF; font-weight: normal; }' +
        '.ls-highlight { color: #FF6347; font-weight: bold; background: none; }' +
        '.ls-loader, .ls-no-results { color: #AAAAAA; text-align: center; padding: 20px; font-style: italic; }' +
        '.ls-pagination { display: flex; justify-content: space-between; align-items: center; padding: 5px 12px; border-top: 1px solid #555; background-color: #3A3A3A; }' +
        '.ls-pagination-btn { background: none; border: none; color: #FFD866; font-size: 16px; cursor: pointer; padding: 5px 10px; transition: color 0.2s; }' +
        '.ls-pagination-btn:hover:not(:disabled) { color: #fff; }' +
        '.ls-pagination-btn:disabled { color: #777; cursor: not-allowed; }' +
        '.ls-pagination-info { color: #AAAAAA; font-size: 11px; }' +
        '.preview-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 10, 20, 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 10001; display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }' +
        '.preview-modal-container { display: flex; flex-direction: column; width: 100%; max-width: 800px; height: 90vh; max-height: 650px; background: #2D2A2E; border-radius: 8px; box-shadow: 0 10px 50px rgba(0,0,0,0.5); border: 1px solid #413D42; overflow: hidden; transform: translateY(-20px) scale(0.98); opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }' +
        '.preview-modal-overlay.visible .preview-modal-container { transform: translateY(0) scale(1); opacity: 1; }' +
        '.preview-modal-header { flex-shrink: 0; padding: 12px 20px; border-bottom: 1px solid #413D42; display: flex; justify-content: space-between; align-items: center; }' +
        '.preview-modal-title { color: #FFD866; font-size: 16px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }' +
        '.preview-modal-close { font-size: 28px; color: #777; cursor: pointer; transition: color 0.2s; padding-left: 15px; }' +
        '.preview-modal-close:hover { color: #fff; }' +
        '.preview-modal-content { flex-grow: 1; overflow-y: auto; padding: 20px; color: #FCFCFA; line-height: 1.7; }' +
        '.preview-modal-content img { max-width: 100%; border-radius: 4px; margin: 10px 0; }' +
        '.preview-modal-content blockquote { background: #312F32; border-left: 3px solid #FFD866; padding: 10px 15px; margin: 10px 0; border-radius: 4px; }' +
        '.preview-modal-footer { flex-shrink: 0; padding: 15px; background: #252526; text-align: center; border-top: 1px solid #413D42; }' +
        '.preview-modal-action-btn { background: #FFD866; color: #2D2A2E; font-weight: bold; padding: 10px 25px; border-radius: 5px; text-decoration: none; transition: all 0.2s ease; display: inline-block; }' +
        '.preview-modal-action-btn:hover { background: #fff; transform: scale(1.05); }' +
        '.preview-loader { width: 40px; height: 40px; border: 4px solid #413D42; border-top-color: #FFD866; border-radius: 50%; animation: spin 0.8s linear infinite; margin: auto; }' +
        '@keyframes spin { to { transform: rotate(360deg); } }' +
       
        '@media (max-width: 768px) {' +
        '  .preview-modal-container { width: 95%; height: 95vh; max-height: 95vh; }' +
        '  .preview-modal-content { padding: 15px; }' +
        '  .preview-modal-action-btn { padding: 8px 20px; font-size: 14px; }' +
        '}' +
       
        '@media (max-width: 480px) {' +
        '  .preview-modal-title { font-size: 14px; }' +
        '  .preview-modal-close { font-size: 24px; padding-left: 10px; }' +
        '  .ls-result-item { padding: 6px 10px; }' +
        '  .ls-result-title { font-size: 12px; }' +
        '  .ls-result-meta { font-size: 10px; }' +
        '}' +
        '</style>';

    $('head').append(sCSS);

    var searchTimer;
    var searchDelay = 300;
    var currentPage = 0;
    var resultsPerPage = 5;
    var allCachedResults = [];

    function displayResults(query) {
        var startIndex = currentPage * resultsPerPage;
        var endIndex = startIndex + resultsPerPage;
        var paginatedResults = allCachedResults.slice(startIndex, endIndex);

        var resultsHTML = '';
        var highlightRegex = new RegExp('(' + query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&") + ')', 'gi');

        if (paginatedResults.length === 0 && currentPage === 0) {
            $resultsDropdown.html('<div class="ls-no-results">لا توجد نتائج مطابقة.</div>');
            return;
        }

        paginatedResults.forEach(function(result) {
            var highlightedTitle = result.title.replace(highlightRegex, '<span class="ls-highlight">$1</span>');
            var authorHTML = '<span class="meta-label meta-label-author">الكاتب:</span> <span class="meta-value">' + $('<div>').text(result.author).html() + '</span>';
            var categoryHTML = '<span class="meta-label meta-label-cat">القسم:</span> <span class="meta-value">' + $('<div>').text(result.category).html() + '</span>';
            var repliesHTML = '<span class="meta-label meta-label-replies">الردود:</span> <span class="meta-value">' + $('<div>').text(result.replies).html() + '</span>';
            var metaInfo = authorHTML + '<span class="meta-separator">|</span>' + categoryHTML + '<span class="meta-separator">|</span>' + repliesHTML;
           
            resultsHTML += '<a href="' + $('<div>').text(result.link).html() + '" class="ls-result-item" data-title="' + $('<div>').text(result.title).html() + '">' +
                                 '<div class="ls-result-title">' + highlightedTitle + '</div>' +
                                 '<div class="ls-result-meta">' + metaInfo + '</div>' +
                                 '</a>';
        });

        var totalPages = Math.ceil(allCachedResults.length / resultsPerPage);
        if (totalPages > 1) {
            var startResult = startIndex + 1;
            var endResult = Math.min(endIndex, allCachedResults.length);
            var paginationInfo = 'عرض ' + startResult + '-' + endResult + ' من ' + allCachedResults.length;

            resultsHTML += '<div class="ls-pagination">' +
                               '<button class="ls-pagination-btn" id="prev-page" ' + (currentPage === 0 ? 'disabled' : '') + '>&laquo;</button>' +
                               '<span class="ls-pagination-info">' + paginationInfo + '</span>' +
                               '<button class="ls-pagination-btn" id="next-page" ' + (currentPage >= totalPages - 1 ? 'disabled' : '') + '>&raquo;</button>' +
                               '</div>';
        }
       
        $resultsDropdown.html(resultsHTML);
    }

    $searchInput.on('keyup', function(e) {
        e.stopImmediatePropagation();
        var $input = $(this);
        clearTimeout(searchTimer);
        var query = $input.val().trim();
       
        if (query.length < 2) { 
            $resultsDropdown.hide(); 
            return; 
        }
       
        positionDropdown($input, $resultsDropdown);
        $resultsDropdown.html('<div class="ls-loader">... جاري البحث ...</div>').show();

        searchTimer = setTimeout(function() {
            var searchUrl = '/search?search_keywords=' + encodeURIComponent(query);
            $.get(searchUrl)
                .done(function(data) {
                    allCachedResults = [];
                    $(data).find('div.block-content').each(function() {
                        var $resultRow = $(this);
                        var $titleLink = $resultRow.find('a.topictitle');
                        if ($titleLink.length) {
                            allCachedResults.push({
                                link: $titleLink.attr('href'),
                                title: $titleLink.text().trim(),
                                author: $resultRow.find('.block-topics-author a').text().trim(),
                                category: $resultRow.find('.block-topics-category').text().trim(),
                                replies: $resultRow.find('.block-topics-posts').clone().children().remove().end().text().trim()
                            });
                        }
                    });
                    currentPage = 0;
                    displayResults(query);
                })
                .fail(function() {
                    $resultsDropdown.html('<div class="ls-no-results">حدث خطأ أثناء البحث.</div>');
                });
        }, searchDelay);
    });

    $resultsDropdown.on('mousedown', '#prev-page, #next-page', function(e) {
        e.preventDefault(); 
        e.stopPropagation(); 
    });

    $resultsDropdown.on('click', '#prev-page', function() {
        if (currentPage > 0) {
            currentPage--;
            displayResults($searchInput.val().trim());
        }
    });

    $resultsDropdown.on('click', '#next-page', function() {
        var totalPages = Math.ceil(allCachedResults.length / resultsPerPage);
        if (currentPage < totalPages - 1) {
            currentPage++;
            displayResults($searchInput.val().trim());
        }
    });
   
    $resultsDropdown.on('click', '.ls-result-item', function(e) {
        e.preventDefault();
        var topicUrl = $(this).attr('href');
        var topicTitle = $(this).data('title');
       
        $resultsDropdown.hide();
        $previewModal.find('.preview-modal-title').text(topicTitle);
        $previewModal.find('.preview-modal-action-btn').attr('href', topicUrl);
        $previewModal.find('.preview-modal-content').html('<div class="preview-loader"></div>');
        $previewModal.css('display', 'flex');
        setTimeout(function() { $previewModal.addClass('visible'); }, 10);

        $.get(topicUrl)
            .done(function(data) {
                var $postContent = $(data).find('.post:first .post-content');
                if ($postContent.length) {
                    $previewModal.find('.preview-modal-content').empty().append($postContent.contents());
                } else {
                    $previewModal.find('.preview-modal-content').html('لا يمكن عرض المعاينة لهذا الموضوع.');
                }
            })
            .fail(function() {
                $previewModal.find('.preview-modal-content').html('فشل في جلب محتوى الموضوع.');
            });
    });

    function closePreviewModal() {
        $previewModal.removeClass('visible');
        setTimeout(function() { $previewModal.hide(); }, 300);
    }
   
    $previewModal.on('click', function(e) { 
        if ($(e.target).is('.preview-modal-overlay, .preview-modal-close')) { 
            closePreviewModal(); 
        } 
    });

    $(document).on('keydown', function(e) {
        if (e.key === 'Escape' && $previewModal.hasClass('visible')) {
            closePreviewModal();
        }
    });

    $searchInput.on('blur', function() { 
        setTimeout(function() { 
            if (!$resultsDropdown.is(':hover')) {
                $resultsDropdown.hide(); 
            }
        }, 200); 
    });

    $resultsDropdown.on('mouseenter', function() {
        $(this).data('is-hovered', true);
    }).on('mouseleave', function() {
        $(this).data('is-hovered', false);
    });
   
    function positionDropdown($input, $dropdown) {
        var offset = $input.offset();
        var height = $input.outerHeight();
        var width = $input.outerWidth();
       
        $dropdown.css({
            top: offset.top + height + 2 + 'px',
            left: offset.left + 'px',
            width: width + 'px'
        });
    }

    $(window).on('resize scroll', function() {
        if ($resultsDropdown.is(':visible')) {
            positionDropdown($searchInput, $resultsDropdown);
        }
    });
});

ثم اضغط على زر قدم.

بهذا الكود يصبح العثور على المحتوى داخل منتداك أسرع وأمتع، مما يزيد من بقاء الأعضاء وتفاعلهم. كل التقدير لصاحب الكود على هذه الإضافة المميزة.

صاحب الكود: Lufy