كمرجع لإمكانية الوصول ، يرجى النظر في توصية أفضل الممارسات من WAI-ARIA combobox مع قائمة منبثقة

صندوق تحرير اقتراح API

هيكل متقدم

<dt-combobox [value]="initialValue" (valueChanges)="fn($event)" (filterChanges)="fn($event)" [placeholder]="'Type here for filter'">
   <dt-option *ngFor="let option of options">{{ option.value }} </dt-option>
</dt-combobox>

المدخلات

| الاسم | اكتب | الوصف |
| ------------- | ------------- | ------------- |
| value | string \| undefined | القيمة الأولية للإدخال |
| placeholder | string \| undefined | عنصر نائب للإدخال |

النواتج

| الاسم | اكتب | الوصف |
| ------------- | ------------- | ------------- |
| valueChanges | EventEmitter<string> | انبعث الحدث عند تحديد قيمة جديدة |
| filterChanges | EventEmitter<string> | ينبعث الحدث عندما يتغير المرشح |

إسقاط المحتوى
خيار dt
dt- optgroup

قائمة تدقيق

• [] دعم مناسب للوحة المفاتيح (سهم لأعلى لأسفل)
• [] WAI-ARIA
• [] النظر في التوافق ngForms
• [] النظر في التحقق من الصحة

مرحبًا @ lukett89 ، شكرًا لك على اقتراح واجهة برمجة التطبيقات. حقا نقطة انطلاق رائعة.
أعتقد أننا سنحتاج إلى نفس المدخلات كما في dt-select .

أود أن أضيف
| الاسم | اكتب | الوصف |
| ------------- | ------------- | ------------- |
| id | string | معرف للتحديد |
| compareWith | (v1: T, v2: T) => boolean | دالة لمقارنة قيم الخيار بالقيم المحددة |
| required | boolean | ما إذا كان الإدخال مطلوبًا |
| panelClass | string | تمت إضافة فئة إلى القائمة المنسدلة |

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

شكرا لردكم @ ffriedl89.
سنأخذ في الاعتبار جميع المدخلات / المخرجات التي ذكرتها للإصدار الأول من المكون.

صندوق تحرير اقتراح API النهائي

هيكل متقدم

<dt-combobox [value]="initialValue" (valueChanges)="fn($event)" (filterChanges)="fn($event)" [placeholder]="'Type here for filter'">
   <dt-option *ngFor="let option of options">{{ option.value }} </dt-option>
</dt-combobox>

المدخلات

| الاسم | اكتب | الوصف |
| ------------- | ------------- | ------------- |
| value | string \| undefined | القيمة الأولية للإدخال |
| placeholder | string \| undefined | عنصر نائب للإدخال |
| id | سلسلة | معرف للتحديد |
| compareWith | (v1: T, v2: T) => boolean | دالة لمقارنة قيم الخيار بالقيم المحددة |
| required | boolean | ما إذا كان الإدخال مطلوبًا |
| panelClass | string | تمت إضافة فئة إلى القائمة المنسدلة |

النواتج

| الاسم | اكتب | الوصف |
| ------------- | ------------- | ------------- |
| valueChanges | EventEmitter<string> | انبعث الحدث عند تحديد قيمة جديدة |
| filterChanges | EventEmitter<string> | ينبعث الحدث عندما يتغير المرشح |
| openedChange | الحدث| ينبعث الحدث عند تبديل لوحة التحديد. |

إسقاط المحتوى
خيار dt
dt- optgroup

قائمة تدقيق

• [] دعم مناسب للوحة المفاتيح (سهم لأعلى لأسفل)
• [] WAI-ARIA
• [] النظر في التوافق ngForms
• [] النظر في التحقق من الصحة

أود الاهتمام بتنفيذ هذه الميزة في غضون الأسبوعين المقبلين. هل يمكنك تعيين المشكلة لي من فضلك؟

بالتزامن وبعد المناقشة مع @ lukett89 ،

أقترح إضافة مدخلين آخرين:
| الاسم | اكتب | القيمة الافتراضية | الوصف |
| --- | --- | --- | --- |
| تحميل | boolean | false | عند التعيين على "صحيح" ، يظهر مؤشر التحميل ليوضح للمستخدم أن البيانات يتم تحميلها / تصفيتها في الوقت الحالي |
| عرض مع | (value: T) => string | (value: T) => $ {value} `| دالة تقوم بإرجاع اسم عرض لكائن معين يمثل خيارًا من مربع التحرير والسرد |

تعتبر وظيفة displayWith مناسبة لاستخدام مربع التحرير والسرد مع الكائنات ويبدو أن مؤشر التحميل مضمون لمكون - في معظم الحالات - سيؤدي إلى إلغاء تحميل التصفية إلى جانب الخادم.