كيف - قائمة البحث
تعرف على كيفية إنشاء قائمة بحث لتصفية الروابط باستخدام JavaScript.
قائمة البحث / التصفية
كيفية البحث عن الروابط في قائمة التنقل:
قائمة الطعام
محتوى الصفحة
ابدأ في الكتابة لفئة / رابط معين داخل شريط البحث "لتصفية" خيارات البحث.
بعض النصوص .. بعض النصوص .. بعض النصوص .. بعض النصوص .. بعض النصوص .. بعض النصوص .. بعض النصوص .. بعض النصوص ..
بعض النصوص الأخرى .. بعض النصوص .. بعض النصوص .. بعض النصوص .. بعض النصوص .. بعض النصوص .. بعض النصوص .. بعض النصوص ..
بعض النصوص..
قم بإنشاء قائمة بحث
الخطوة 1) أضف HTML:
مثال
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.."
title="Type in a category">
<ul id="myMenu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Node.js</a></li>
</ul>
ملاحظة: نحن نستخدم href = "#" في هذا العرض لأنه ليس لدينا صفحة لربطها بها. في الحياة الواقعية ، يجب أن يكون هذا عنوان URL حقيقيًا لصفحة معينة.
الخطوة 2) أضف CSS:
نمط مربع البحث وقائمة التنقل:
مثال
/* Style the search box */
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
}
/* Style the navigation
menu */
#myMenu {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Style the navigation links */
#myMenu li a {
padding: 12px;
text-decoration: none;
color: black;
display: block
}
#myMenu li a:hover {
background-color: #eee;
}
الخطوة 3) أضف JavaScript:
مثال
<script>
function myFunction() {
// Declare variables
var input, filter,
ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul =
document.getElementById("myMenu");
li =
ul.getElementsByTagName("li");
// Loop through all
list items, and hide those who don't match the search query
for (i = 0; i <
li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
}
else {
li[i].style.display = "none";
}
}
}
</script>
نصيحة: قم بإزالة toUpperCase () إذا كنت تريد إجراء بحث حساس لحالة الأحرف.
نصيحة: تحقق أيضًا من كيفية تصفية الجداول .
نصيحة: تحقق أيضًا من كيفية تصفية القوائم .