svelte search

بحث svelte

مكون بحث Svelte يمكن الوصول إليه وقابل للتخصيص.

يتكون مكون البحث هذا باستخدام form الدلالي وعناصر input .

راجع الكتابة الرفيعة لمكون البحث مع نتائج القائمة المنسدلة.

جربه في Svelte REPL.

---

تثبيت

 # npm
npm i svelte-search

# pnpm
pnpm i svelte-search

# Yarn
yarn add svelte-search

# Bun
bun add svelte-search

التصميم

هذا المكون غير مصمم حسب التصميم. استهدف المكون باستخدام محدد [data-svelte-search] .

 : global ([ data-svelte-search ] input ) {
  width : 100 % ;
  font-size : 1 rem ;
  padding : 0.5 rem ;
  margin : 0.5 rem 0 ;
  border : 1 px solid # e0e0e0 ;
  border-radius : 0.25 rem ;
}

الاستخدام

ملزمة في اتجاهين

< script >
  import Search from " svelte-search " ;

  let value = " " ;
</ script >

< Search bind:value />

{ #if value }
  < button on:click ={() => ( value = " " )}>Clear "{ value }"</ button >
{ /if }

على:إرسال

عنصر input موجود في form . استخدم حدث submit المُعاد توجيهه للحصول على القيمة عند الضغط على "Enter".

< Search bind:value on:submit ={() => console . log ( " submit " , value )} />

التسمية مع نص العنصر النائب

تتم إعادة توجيه $$restProps إلى عنصر الإدخال.

< Search label = " My label " placeholder = " Placeholder text... " />

فتحة التسمية

< Search >
  < span slot = " label " style = " color: red; " >Custom label</ span >
</ Search >

تسمية مخفية بصريا

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

< Search hideLabel label = " My label " placeholder = " Placeholder text... " />

التركيز (تصريحي)

استخدم دعامة autofocus لتركيز الإدخال بشكل صريح.

< Search autofocus />

التركيز (برمجي)

قم بربط الدعامة ref لتركيز الإدخال برمجيًا.

< script >
  import Search from " svelte-search " ;

  let ref = null ;
</ script >

< Search bind:ref />

< button on:click ={() => ref . focus ()}>Focus</ button >

المدخلات المرتدة

استخدم خاصية debounce لتحديد قيمة الارتداد بالمللي ثانية.

< script >
  import Search from " svelte-search " ;

  let events = [];
</ script >

< Search
  debounce ={ 800 }
  on:type ={({ detail : value }) => ( events = [ ... events , value ])}
/>

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

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

تتم إعادة توجيه $$restProps إلى عنصر الإدخال.

الدعائم

اسم الدعامة	يكتب	القيمة الافتراضية
قيمة	string	""
ملصق	string	"Search"
this.hideLabel	boolean	false
نبذ	number	0
المرجع	HTMLInputElement	null
بطاقة تعريف	string	"search" + Math.random().toString(36)
RemoveFormAriaAttributes	boolean	false
ضبط تلقائي للصورة	boolean	false

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

• على: الإدخال
• على: تغيير
• على:إرسال
• على: التركيز
• على: طمس
• على: keydown

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

• on:type : يتم إطلاقه عند تحديث قيمة الإدخال
• on:clear : يتم تشغيله عند النقر فوق الزر "X" لمسح قيمة الإدخال

< Search
  on:type ={( e ) => {
    console . log ( " type " , e . detail ); // input value
  }}
  on:clear ={() => {
    console . log ( " clear " );
  }}
/>

سجل التغيير

سجل التغيير

رخصة

معهد ماساتشوستس للتكنولوجيا