- لما يبحث المستخدم عن كلمة واحدة تضهر جميع النتائج الي تحتوي هذي الكلمة
- اذا ادخل كلمتين تضهر النتائج الي تحوي( الكلمتين معا ) حصرا . وهكذا
- ليس بالضروره ان تكون الكلمتين او اكثر متتاليتين
ممكن كود سهل لانشاء محرك بحث باستخدام جافاسكربت فقط .
يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد
دخول
التعليقات
ستحتاج إلى البحث من خلال مصفوفة، وتصفية البيانات باستخدام ميثود 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>