svelte typeahead

svelte-typeahead

คอมโพเนนต์การพิมพ์ล่วงหน้าที่เข้าถึงได้และคลุมเครือ

ส่วนประกอบนี้ใช้ไลบรารีฟัซซี่น้ำหนักเบาสำหรับการค้นหาฟัซซี่ฝั่งไคลเอ็นต์ และปฏิบัติตามแนวทางของ 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-search

ใช้อุปกรณ์ 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	ว่าจะเลือกผลลัพธ์แรกโดยอัตโนมัติหรือไม่
อินพุต AfterSelect	"update" | "clear" | "keep"	"update"	ตั้งค่าเป็น "clear" เพื่อล้าง value หลังจากเลือกผลลัพธ์ ตั้งค่าเป็น "keep" เพื่อไม่ให้ช่องค้นหาเปลี่ยนแปลงหลังจากการเลือก
ผลลัพธ์	FuzzyResult[]	[]	ผลลัพธ์ฟัซซี่ดิบจากโมดูลฟัซซี่
โฟกัสหลังจากเลือก	boolean	false	ตั้งค่าเป็น true เพื่อปรับโฟกัสอินพุตใหม่หลังจากเลือกผลลัพธ์แล้ว
แสดง DropdownOnFocus	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 >

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

เหตุการณ์ต่อไปนี้จะถูกส่งต่อไปยังองค์ประกอบ svelte-search

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

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

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

ใบอนุญาต

เอ็มไอที