بناء قائمة منسدلة مع مربع نصي وإمكانية إلغاء تحديد العناصر عند النقر عليها في مربع البحث يتطلب استخدام تقنيات البرمجة النصية مثل JavaScript وHTML. يمكن أن يكون الهدف هنا هو تطوير وظيفة تتحقق من العنصر الذي تم النقر عليه في مربع البحث ومن ثم إزالة تحديده.
لتحقيق هذا، يمكن استخدام حدث النقر (click event) للكشف عن العنصر الذي تم النقر عليه في مربع البحث. بعد ذلك، يمكن إزالة تحديد هذا العنصر عن طريق تغيير النمط أو اللون للعنصر ليظهر كغير محدد.
في الأسفل، سأوضح نموذجًا بسيطًا باستخدام HTML وJavaScript لتحقيق هذا السلوك:
htmlhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu with Unselectable Itemstitle>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.selected {
background-color: lightgreen;
}
style>
head>
<body>
<div class="dropdown">
<input type="text" id="myInput" oninput="filterFunction()" placeholder="Search for items..">
<div class="dropdown-content" id="myDropdown">
<a href="#" onclick="toggleSelection(event, 'item1')">Item 1a>
<a href="#" onclick="toggleSelection(event, 'item2')">Item 2a>
<a href="#" onclick="toggleSelection(event, 'item3')">Item 3a>
div>
div>
<script>
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
function toggleSelection(event, itemName) {
event.preventDefault(); // Prevent link from being followed
var item = document.getElementById(itemName);
if (item.classList.contains("selected")) {
item.classList.remove("selected");
} else {
item.classList.add("selected");
}
}
script>
body>
html>
هذا النموذج يحتوي على مربع نصي للبحث وعناصر منسدلة. عند كتابة نص في مربع البحث، يتم تصفية العناصر بناءً على النص المدخل. وعند النقر على العنصر في مربع البحث، يتم تحديد العنصر بتغيير لون خلفيته إلى الأخضر. في حال النقر مرة أخرى، يتم إلغاء تحديد العنصر.
يرجى ملاحظة أن هذا مثال بسيط ويمكن تعديله وتحسينه بمزيد من التفاصيل والتخصيصات وفقاً لاحتياجات مشروعك.
المزيد من المعلومات
بالطبع، سأقدم لك المزيد من المعلومات والتفاصيل لإكمال المقال.
توسيع المقال:
التفصيل الفني:
في الكود السابق، قمنا بتحقيق السلوك المطلوب باستخدام HTML وJavaScript. دعنا نقوم بشرح بعض النقاط الفنية:
-
HTML Structure: نستخدم عنصر
inputلمربع البحث وعنصرdivلعناصر القائمة المنسدلة. -
CSS Styling: نستخدم CSS لتنسيق العناصر بحيث يظهر مربع البحث بجانب القائمة المنسدلة، ونخفي القائمة حتى يتم النقر على مربع البحث.
-
JavaScript Functions:
filterFunction(): تقوم بتصفية العناصر بناءً على النص المدخل في مربع البحث.toggleSelection(): تقوم بتحديد أو إلغاء تحديد العنصر المنقر عليه.
تعزيز الأداء:
يمكن تعزيز الأداء وتحسين تجربة المستخدم من خلال بعض الإضافات:
-
تحسين التصميم البصري: يمكن تحسين تصميم وتجربة المستخدم بإضافة مزيد من الأنماط والتأثيرات البصرية مثل التحولات والانتقالات.
-
التنقل بواسطة لوحة المفاتيح: يمكن إضافة دعم للتنقل بواسطة لوحة المفاتيح بحيث يمكن للمستخدم استخدام مفاتيح الأسهم أو مفتاح Enter لتحديد العناصر.
-
تحسين الأداء: في حالة وجود عدد كبير من العناصر، يمكن تحسين أداء التصفية عبر البحث من خلال استخدام تقنيات مثل التعددية أو استخدام مكتبات متقدمة لإدارة القوائم.
الاستخدامات المتعددة:
هذا النموذج يمكن توسيعه لتناسب مجموعة متنوعة من السيناريوهات، مثل:
-
اختيار العناصر في نماذج الويب: يمكن استخدام هذا النموذج لاختيار العناصر في نماذج الويب مثل نماذج الطلبات أو تحرير الملفات.
-
البحث في قوائم العناصر: يمكن استخدام مربع البحث للبحث في قوائم العناصر الكبيرة وتصفيتها بناءً على المدخلات.
-
إدارة البيانات الشخصية: يمكن استخدام هذا النموذج لإدارة البيانات الشخصية مثل قوائم الاتصال أو المهام.
الختام:
باستخدام الأدوات المناسبة والتقنيات المناسبة، يمكن تحقيق السلوك المطلوب وتوفير تجربة مستخدم سلسة وفعالة. استمر في التطوير وتحسين الحلول الخاصة بك لضمان تلبية احتياجات المستخدمين وتحقيق الأهداف المحددة لمشروعك.
