إنشاء قوائم منسدلة قابلة للتحرير في جافا سكريبت

إنشاء مربع قائمة منسدلة قابل للتحرير وذو وظائف كاملة وقابل للتخصيص في جافا سكريبت يعزز تفاعل المستخدم من خلال السماح بالاختيار من قائمة محددة مسبقًا وإدخال قيم جديدة. يستكشف هذا البرنامج التعليمي نهجين: تنفيذ يدوي باستخدام HTML و CSS و JavaScript، ونهج مبسط باستخدام مكتبة Select2.

جدول المحتويات

• الطريقة الأولى: إنشاء مربع قائمة منسدلة قابل للتحرير مخصص
• الطريقة الثانية: استخدام مكتبة Select2
• تحسين مربع القائمة المنسدلة القابل للتحرير

الطريقة الأولى: إنشاء مربع قائمة منسدلة قابل للتحرير مخصص

توفر هذه الطريقة تحكمًا دقيقًا وفهمًا عميقًا للآليات الأساسية. سنقوم بدمج حقل إدخال للكتابة وقائمة غير مرتبة مخفية لعرض الخيارات.

أولًا، دعونا ننشئ بنية HTML:


<div class="combobox">
<input type="text" id="comboboxInput" placeholder="اختر أو اكتب...">
<ul id="comboboxList"></ul>
</div>


بعد ذلك، أضف CSS للتصميم:


.combobox {
position: relative;
display: inline-block;
}
.combobox input {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
}
.combobox ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #ccc;
background-color: white;
display: none; /* مخفي افتراضيًا */
}
.combobox li {
padding: 5px;
cursor: pointer;
}
.combobox li:hover {
background-color: #f0f0f0;
}


أخيرًا، جافا سكريبت لإدارة الوظائف:


const input = document.getElementById('comboboxInput');
const list = document.getElementById('comboboxList');
let options = ['الخيار الأول', 'الخيار الثاني', 'الخيار الثالث'];

input.addEventListener('input', () => {
list.innerHTML = '';
const filter = input.value.toLowerCase();
options.forEach(option => {
if (option.toLowerCase().includes(filter)) {
const item = document.createElement('li');
item.textContent = option;
item.addEventListener('click', () => {
input.value = option;
list.style.display = 'none';
});
list.appendChild(item);
}
});
list.style.display = input.value ? 'block' : 'none';
});

input.addEventListener('focus', () => {
list.style.display = 'block';
});

input.addEventListener('blur', () => {
setTimeout(() => {
list.style.display = 'none';
}, 100);
});

// إضافة وظيفة خيار جديد (مثال)
input.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && !options.includes(input.value)) {
options.push(input.value);
list.style.display = 'none';
input.value = ''; //مسح الإدخال بعد الإضافة
}
});


الطريقة الثانية: استخدام مكتبة Select2

تبسط Select2 العملية بشكل كبير. قم بتضمين ملفات CSS و JavaScript الخاصة بـ Select2 في مشروعك (يمكنك تنزيلها من موقع Select2 الرسمي أو استخدام CDN). ثم، قم بتهيئة Select2 على عنصر select الخاص بك:


<select id="mySelect">
<option value="Option 1">الخيار الأول</option>
<option value="Option 2">الخيار الثاني</option>
<option value="Option 3">الخيار الثالث</option>
</select>

<script>
$('#mySelect').select2({
tags: true, // يمكّن إضافة خيارات جديدة
allowClear: true // يسمح بمسح الاختيار
});
</script>


يجعل الخيار tags: true مربع القائمة المنسدلة قابلًا للتحرير، مما يسمح للمستخدمين بإضافة خيارات جديدة غير موجودة في القائمة الأولية. يوفر الخيار allowClear: true طريقة لمسح الاختيار.

تحسين مربع القائمة المنسدلة القابل للتحرير

بغض النظر عن الطريقة التي تختارها، ضع في اعتبارك هذه التحسينات:

• الاستمرارية: قم بتخزين الخيارات باستخدام التخزين المحلي أو قاعدة بيانات على جانب الخادم للاحتفاظ بها عبر الجلسات.
• التحقق من الصحة: قم بتنفيذ التحقق من صحة الإدخال لمنع الإدخالات غير الصالحة.
• التصميم: قم بتخصيص المظهر باستخدام CSS للاندماج بسلاسة مع تصميم تطبيقك.
• مصادر البيانات البعيدة: بالنسبة لمجموعات البيانات الكبيرة، قم بجلب الخيارات ديناميكيًا باستخدام مكالمات AJAX.