تحسين أداء شريط البحث: دليل للمبتدئين

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

لتحقيق هذا الهدف، يمكنك تغيير الجزء الخاص بالجافا سكريبت (JS) في الكود لينفذ وظائف مخصصة للبحث في الملف النصي. يمكن أن يكون لديك ملف نصي يحتوي على مجموعة من الكلمات المفتاحية التي يتم البحث عنها. السطور التالية تعرض مثالًا بسيطًا لتحقيق هذه الوظيفة:

htmlCopy code
<script type="text/javascript">
    document.getElementById('frmSearch').onsubmit = function() {
        // قراءة قيمة البحث من الحقل
        var searchTerm = document.getElementById('txtSearch').value.toLowerCase();

        // القراءة من الملف النصي (يفترض وجود ملف نصي بالاسم "keywords.txt")
        fetch('keywords.txt')
            .then(response => response.text())
            .then(data => {
                // تحويل محتوى الملف إلى مصفوفة من الكلمات المفتاحية
                var keywords = data.split('\n');

                // بحث عن الكلمة المفتاحية في المصفوفة
                var foundKeywords = keywords.filter(keyword => keyword.toLowerCase().includes(searchTerm));

                // عرض الكلمات المفتاحية الموجودة
                alert('الكلمات المفتاحية الموجودة: ' + foundKeywords.join(', '));
            })
            .catch(error => console.error('حدث خطأ: ', error));

        // منع إرسال النموذج الافتراضي
        return false;
    }
script>

يرجى ملاحظة أن هذا مثال بسيط، ويفترض أن يكون لديك ملف نصي بالاسم “keywords.txt” يحتوي على كلمات مفتاحية مفصولة بسطر. تتم قراءة الكلمات المفتاحية من الملف ويتم عرض الكلمات التي تحتوي على البحث الذي أدخله المستخدم.

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

قمت بتحسين الجزء الخاص بالجافا سكريبت ليشمل إظهار النتائج على الصفحة وتحسين التفاعلية. يمكنك استخدام هذا الكود كنقطة انطلاق:

htmlCopy code
<script type="text/javascript">
    document.getElementById('frmSearch').onsubmit = function(event) {
        // منع إرسال النموذج الافتراضي
        event.preventDefault();

        // قراءة قيمة البحث من الحقل
        var searchTerm = document.getElementById('txtSearch').value.toLowerCase();

        // القراءة من الملف النصي (يفترض وجود ملف نصي بالاسم "keywords.txt")
        fetch('keywords.txt')
            .then(response => response.text())
            .then(data => {
                // تحويل محتوى الملف إلى مصفوفة من الكلمات المفتاحية
                var keywords = data.split('\n');

                // بحث عن الكلمة المفتاحية في المصفوفة
                var foundKeywords = keywords.filter(keyword => keyword.toLowerCase().includes(searchTerm));

                // عرض النتائج على الصفحة
                displayResults(foundKeywords);
            })
            .catch(error => console.error('حدث خطأ: ', error));
    }

    // دالة لعرض النتائج على الصفحة
    function displayResults(results) {
        var resultsContainer = document.getElementById('searchResults');

        // مسح أي نتائج سابقة
        resultsContainer.innerHTML = '';

        // إضافة النتائج إلى الصفحة
        if (results.length > 0) {
            var resultsList = document.createElement('ul');
            results.forEach(keyword => {
                var listItem = document.createElement('li');
                listItem.textContent = keyword;
                resultsList.appendChild(listItem);
            });
            resultsContainer.appendChild(resultsList);
        } else {
            resultsContainer.textContent = 'لا توجد نتائج.';
        }
    }
script>


<div id="searchResults">div>

تم إضافة div بالاسم “searchResults” لعرض النتائج على الصفحة، وتم إنشاء دالة “displayResults” لإظهار النتائج بشكل جمالي. يتم تحديث هذا العنصر في الصفحة كلما تم إجراء بحث.