كيفية إنشاء محرك بحث باستخدام JavaScript

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

الخطوة 1: إنشاء HTML للصفحة

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

<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>محرك البحث</title>
<style>
body { font-family: Arial, sans-serif; }
#results { margin-top: 20px; }
</style>
</head>
<body>
<h1>محرك البحث</h1>
<input type="text" id="searchInput" placeholder="أدخل كلمة البحث">
<button onclick="search()">بحث</button>
<div id="results"></div>
<script src="search.js"></script>
</body>
</html>

الخطوة 2: إعداد البيانات للبحث

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

const data = [
{ title: "مقال عن JavaScript", description: "تعلم أساسيات JavaScript." },
{ title: "مقال عن HTML", description: "تعلم هيكلية صفحات الويب باستخدام HTML." },
{ title: "مقال عن CSS", description: "تعلم تنسيق صفحات الويب باستخدام CSS." },
// أضف المزيد من البيانات هنا
];

الخطوة 3: كتابة دالة البحث

الآن، سنقوم بكتابة دالة JavaScript للبحث في هذه البيانات وعرض النتائج:

function search() {
const input = document.getElementById('searchInput').value.toLowerCase();
const results = document.getElementById('results');
results.innerHTML = ''; // مسح النتائج السابقة
const filteredData = data.filter(item =>
item.title.toLowerCase().includes(input) ||
item.description.toLowerCase().includes(input)
);
if (filteredData.length > 0) {
filteredData.forEach(item => {
const resultItem = document.createElement('div');
resultItem.innerHTML = `<h2>${item.title}</h2><p>${item.description}</p>`;
results.appendChild(resultItem);
});
} else {
results.innerHTML = '<p>لم يتم العثور على نتائج.</p>';
}
}

الخطوة 4: ربط دالة البحث بـ HTML

تأكد من أنك قد قمت بربط ملف JavaScript بصفحة HTML الخاصة بك. في الشيفرة HTML السابقة، قمنا بالفعل بربط ملف search.js:

<script src="search.js"></script>

تأكد أيضًا من أن لديك ملفًا باسم search.js في نفس المجلد يحتوي على شيفرة JavaScript الخاصة بنا.

التجريب والتحسين

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

يمكنك تحسين محرك البحث بإضافة ميزات مثل:

البحث بالمتطابقات الجزئية.
تمييز النص المطابق في النتائج.
ترتيب النتائج بناءً على الأهمية.

في هذا المقال، قمنا بشرح كيفية إنشاء محرك بحث بسيط باستخدام JavaScript وHTML. يمكنك توسيع هذا المشروع ليشمل المزيد من الميزات والبيانات لجعله أكثر فائدة وتفاعلية.