svelte search

ค้นหา svelte

ส่วนประกอบการค้นหา Svelte ที่เข้าถึงได้และปรับแต่งได้

องค์ประกอบการค้นหานี้ประกอบด้วย form ความหมายและองค์ประกอบ input

ดู svelte-typeahead สำหรับองค์ประกอบการค้นหาพร้อมผลลัพธ์แบบเลื่อนลง

ลองใช้ใน 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 เพื่อระบุค่า 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"
ซ่อนฉลาก	boolean	false
ดีเด้ง	number	0
อ้างอิง	HTMLInputElement	null
รหัส	string	"search" + Math.random().toString(36)
ลบFormAriaAttributes	boolean	false
ออโต้โฟกัส	boolean	false

กิจกรรมที่ส่งต่อ

• เปิด:อินพุต
• บน: เปลี่ยน
• เมื่อ: ส่ง
• บน:โฟกัส
• บน:เบลอ
• บน: กดปุ่มลง

เหตุการณ์ที่ส่งไป

• on:type : เริ่มทำงานเมื่อมีการอัพเดตค่าอินพุต
• on:clear : เริ่มทำงานเมื่อคลิกปุ่ม "X" เพื่อล้างค่าอินพุต

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

บันทึกการเปลี่ยนแปลง

บันทึกการเปลี่ยนแปลง

ใบอนุญาต

เอ็มไอที