- لما يبحث المستخدم عن كلمة واحدة تضهر جميع النتائج الي تحتوي هذي الكلمة
- اذا ادخل كلمتين تضهر النتائج الي تحوي( الكلمتين معا ) حصرا . وهكذا
- ليس بالضروره ان تكون الكلمتين او اكثر متتاليتين
ممكن كود سهل لانشاء محرك بحث باستخدام جافاسكربت فقط .
جرب سؤوال التشات جي بي تي، واذا اعطاك اجابة اخبره مرة اخرى ان يعطيك الجواب بطريقة regular expression فهي الانسب لو لم يستعملها
ستحتاج إلى البحث من خلال مصفوفة، وتصفية البيانات باستخدام ميثود filter() لإرجاع العناصر التي تحتوي على جميع الكلمات المدخلة ثم عرض النتائج المطابقة .
كالتالي:
<!DOCTYPE html>
<html>
<head>
<title>محرك بحث بسيط</title>
</head>
<body>
<h1>محرك بحث بسيط</h1>
<input type="text" id="search-box" placeholder="ابحث هنا...">
<button onclick="search()">بحث</button>
<div id="results">
<h2>النتائج:</h2>
<ul id="results-list">
</ul>
</div>
<script>
const data = [
"تفاح",
"مانجو",
"موز",
" مانجو سكري",
"تفاح أحمر"
];
function search() {
const searchTerm = document.getElementById("search-box").value.toLowerCase();
const searchTerms = searchTerm.split(" ");
const resultsList = document.getElementById("results-list");
resultsList.innerHTML = "";
if (searchTerm === "") {
return;
}
const matchingResults = data.filter(item => {
return searchTerms.every(term => item.toLowerCase().includes(term));
});
if (matchingResults.length > 0) {
matchingResults.forEach(result => {
const listItem = document.createElement("li");
listItem.textContent = result;
resultsList.appendChild(listItem);
});
} else {
const listItem = document.createElement("li");
listItem.textContent = "لا توجد نتائج مطابقة.";
resultsList.appendChild(listItem);
}
}
</script>
</body>
</html>
في هذه الحالة اذا كتبت تفاح اخضر سيرجع لي التفاح الاحمر كنتيجة بينما من المفترض ان يعيد العناصر التي تحتوي على الكلمتين معا .
اي لا يرجع نتيجة الان
التعليقات