تنزيل svelte typeahead - تنزيل كود المصدر svelte typeahead

svelte typeahead

شفرة المصدر الأخرى

v4.4.2

تنزيل

svelte-typehead

مكون الكتابة المسبقة للبحث الغامض الذي يمكن الوصول إليه.

يستخدم هذا المكون مكتبة غامضة خفيفة الوزن للبحث الغامض من جانب العميل ويتبع إرشادات WAI-ARIA.

جربه في Svelte REPL.

تثبيت

 # npm
npm i svelte-typeahead

# pnpm
pnpm i svelte-typeahead

# Yarn
yarn add svelte-typeahead

# Bun
bun add svelte-typeahead

الاستخدام

أساسي

قم بتمرير مجموعة من الكائنات إلى دعامة data . استخدم خاصية extract لتحديد القيمة المراد البحث عنها.

< script >
  import Typeahead from " svelte-typeahead " ;

  const data = [
    { state : " California " },
    { state : " North Carolina " },
    { state : " North Dakota " },
    { state : " South Carolina " },
    { state : " South Dakota " },
    { state : " Michigan " },
    { state : " Tennessee " },
    { state : " Nevada " },
    { state : " New Hampshire " },
    { state : " New Jersey " },
  ];

  const extract = ( item ) => item . state ;
</ script >

< Typeahead { data } { extract } />

تسمية مخصصة

تتم إعادة توجيه $$restProps إلى بحث svelte.

استخدم دعامة label لتحديد تسمية مخصصة.

< Typeahead label = "U.S. States" { data } { extract } />

التسمية المخفية

اضبط hideLabel على true لإخفاء التسمية بشكل مرئي.

من المستحسن أن تقوم بتعيين label - حتى لو كان مخفيًا - لتسهيل الوصول إليه.

< Typeahead label = "U.S. States" hideLabel { data } { extract } />

نتائج مصممة حسب الطلب

يستخدم هذا المكون المكتبة الغامضة لتمييز الأحرف المتطابقة مع عنصر العلامة.

استخدم الفتحة الافتراضية لتقديم نتائج مخصصة.

< Typeahead { data } { extract } let:result let:index >
  < strong >{ @html result . string }</ strong >
  { index }
</ Typeahead >

لا توجد نتائج

استخدم خانة "لا توجد نتائج" لعرض رسالة إذا لم تسفر قيمة البحث عن نتائج.

< Typeahead value = "abcd" { data } { extract } let:value >
  < svelte:fragment slot = " no-results " >
    No results found for "{ value }"
  </ svelte:fragment >
</ Typeahead >

الحد من عدد النتائج

استخدم خاصية limit لتحديد الحد الأقصى لعدد النتائج التي سيتم عرضها. الافتراضي هو Infinity .

< Typeahead limit ={ 2 } { data } { extract } />

العناصر المعطلة

قم بتعطيل العناصر باستخدام مرشح disable . لا يمكن تحديد العناصر المعطلة أو التنقل فيها بواسطة لوحة المفاتيح.

في المثال التالي، يتم تعطيل العناصر ذات قيمة state التي تحتوي على "Carolina".

< Typeahead
  { data }
  value = " ca "
  extract ={( item ) => item . state }
  disable ={( item ) => / Carolina / . test ( item . state )}
/>

التركيز بعد التحديد

قم بتعيين focusAfterSelect على true لإعادة تركيز مدخلات البحث بعد تحديد النتيجة.

< Typeahead focusAfterSelect { data } { extract } />

إظهار القائمة المنسدلة على التركيز

افتراضيًا، سيتم عرض القائمة المنسدلة إذا كانت value تحتوي على نتائج.

قم بتعيين showDropdownOnFocus على true لإظهار القائمة المنسدلة فقط عندما يتم التركيز على إدخال البحث.

< Typeahead value = "ca" showDropdownOnFocus { data } { extract } />

عرض كافة النتائج على التركيز

افتراضيًا، لا يتم عرض أي نتائج في حالة التركيز على إدخال فارغ (على سبيل المثال، value="" ).

قم بتعيين showAllResultsOnFocus على true حتى يتم عرض كافة النتائج عند التركيز على مدخلات فارغة.

< Typeahead showAllResultsOnFocus { data } { extract } />

التصميم

ملاحظة: تم تصميم هذا المكون بشكل بسيط حسب التصميم. يمكنك استهداف المكون باستخدام محدد [data-svelte-typeahead] .

 : global ([ data-svelte-typeahead ]) {
  margin : 1 rem ;
}

واجهة برمجة التطبيقات

الدعائم

اسم	يكتب	القيمة الافتراضية	وصف
قيمة	`string`	`""`	أدخل قيمة البحث
بيانات	`TItem[]`	`[]`	العناصر للبحث.
يستخرج	`(TItem) => any`	`(item) => item`	استهدف القيمة إذا كان `TItem` كائنًا.
إبطال	`(TItem) => boolean`	`(item) => false`	تظهر العناصر المعطلة في النتائج ولكن لا يمكن تحديدها.
فلتر	`(TItem) => boolean`	`(item) => false`	لن يتم عرض العناصر التي تمت تصفيتها في النتائج.
اختيار تلقائي	`boolean`	`true`	ما إذا كان سيتم تحديد النتيجة الأولى تلقائيًا أم لا.
inputAfterSelect	`"update" \| "clear" \| "keep"`	`"update"`	اضبط على `"clear"` لمسح `value` بعد تحديد النتيجة. اضبط على `"keep"` لإبقاء حقل البحث دون تغيير بعد التحديد.
نتائج	`FuzzyResult[]`	`[]`	نتائج غامضة أولية من الوحدة الغامضة
focusAfterSelect	`boolean`	`false`	اضبط على `true` لإعادة تركيز الإدخال بعد تحديد النتيجة.
showDropdownOnFocus	`boolean`	`false`	اضبط على `true` لإظهار النتائج فقط عندما يتم التركيز على الإدخال.
showAllResultsOnFocus	`boolean`	`false`	اضبط على `true` لتظهر جميع النتائج عند التركيز على مدخلات فارغة.
حد	`number`	`Infinity`	تحديد الحد الأقصى لعدد النتائج المراد عرضها.
`...$$restProps`	(تم إحالتها إلى `svelte-search` )	لا يوجد	تتم إعادة توجيه جميع الدعائم الأخرى إلى عنصر الإدخال.

الأحداث المرسلة

on:select : يتم إرساله عند تحديد نتيجة
on:clear : يتم إرساله عند مسح حقل الإدخال

< script >
  import Typeahead from " svelte-typeahead " ;

  let e = [];
</ script >

< Typeahead
  { data }
  { extract }
  on:select ={({ detail }) => ( e = [ ... e , { event: " select " , detail }])}
  on:clear ={() => ( e = [ ... e , { event: " clear " }])}
/>

< pre >{ JSON . stringify ( e , null , 2 )}</ pre >