typeahead standalone

Typeahead-standalone.js

---

ไลบรารีเติมข้อความอัตโนมัติแบบสแตนด์อโลนที่มีคุณสมบัติครบถ้วนรวดเร็ว

- ไฮไลท์ ?

• คำแนะนำที่รวดเร็วและการเติมข้อความอัตโนมัติที่โดดเด่น
• - มี 0 การพึ่งพา ! เขียนด้วย JS บริสุทธิ์ (typescript)
• - ไม่เชื่อเรื่องพระเจ้า! ใช้ได้กับ ทุก เฟรมเวิร์ก (React, Vue, Svelte ฯลฯ)
• ปรับแต่งได้สูงและมีน้ำหนักเบา
• ⚜️ การสนับสนุนในตัวสำหรับแหล่งข้อมูลหลายแหล่ง - Local, Prefetch และ Remote (อัตราการร้องขอถูกจำกัดตามค่าเริ่มต้น)
• ⚡️ คำแนะนำคำนวณผ่านอัลกอริธึมที่มีประสิทธิภาพมากโดยอิงจากโครงสร้างข้อมูลแบบ Trie
• ♿️ รูปแบบการออกแบบที่สอดคล้องกับ WAI-ARIA พร้อมรองรับตัวกำกับเสียงภาษา
• รองรับเบราว์เซอร์หลักทุกตัว!

---

การสาธิต/เอกสาร

ค้นหา เอกสารโดยละเอียดพร้อมการสาธิตสด สำหรับ typeahead-standalone.js ที่นี่

ดูตัวอย่างพื้นฐาน:

➕ ติดตั้ง

 # you can install typeahead with npm
$ npm install --save typeahead-standalone

# Alternatively you can use Yarn
$ yarn add typeahead-standalone

จากนั้นรวมไลบรารีไว้ในแอป/เพจของคุณ

ในฐานะที่เป็นโมดูล

 // using ES6 modules
import typeahead from 'typeahead-standalone' ; // imports library (js)
import 'typeahead-standalone/dist/basic.css' ; // imports basic styles (css)

// using CommonJS modules
const typeahead = require ( 'typeahead-standalone' ) ;
require ( 'typeahead-standalone/dist/basic.css' ) ;

ในบริบทของเบราว์เซอร์

 <!-- Include the basic styles & the library -->
< link rel =" stylesheet " href =" ./node_modules/typeahead-standalone/dist/basic.css " />
< script src =" ./node_modules/typeahead-standalone/dist/typeahead-standalone.umd.js " > </ script >

<!-- Alternatively, you can use a CDN. For example, use jsdelivr to get the latest version -->
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/typeahead-standalone/dist/basic.css " />
< script src =" https://cdn.jsdelivr.net/npm/typeahead-standalone " > </ script >

<!-- or use unpkg.com to get a specific version -->
< link rel =" stylesheet " href =" https://unpkg.com/[email protected]/dist/basic.css " />
< script src =" https://unpkg.com/[email protected]/dist/typeahead-standalone.umd.js " > </ script >

ไลบรารีจะพร้อมใช้งานเป็นวัตถุส่วนกลางที่ window.typeahead

- การใช้งาน

Typeahead ต้องการองค์ประกอบ input เพื่อแนบตัวเอง และ Data source (ภายในเครื่อง/ระยะไกล) เพื่อแสดงคำแนะนำ

นี่เป็นตัวอย่างพื้นฐาน (ดูการสาธิตสำหรับตัวอย่างขั้นสูง)

HTML

 <!-- include the library -->
< script src =" ... " async > </ script >

<!-- Html markup -->
< input type =" search " id =" searchInput " autocomplete =" off " placeholder =" Search... " > 

จาวาสคริปต์

 // local Data
const colors = [ 'Grey' , 'Brown' , 'Black' , 'Blue' ] ;

// input element to attach to
const inputElement = document . getElementById ( "searchInput" ) ;

typeahead ( {
    input : inputElement ,
    source : {
      local : colors ,
      // prefetch: {...}
      // remote: {...}
    }
} ) ; 

- การกำหนดค่า

คุณสามารถส่งตัวเลือกการกำหนดค่าต่อไปนี้ไปยัง typeahead-standalone :

พารามิเตอร์	คำอธิบาย	ค่าเริ่มต้น
input	องค์ประกอบอินพุต DOM จะต้องถูกส่งผ่านด้วยพารามิเตอร์นี้ และตัวพิมพ์ข้างหน้าจะแนบตัวเองเข้ากับฟิลด์นี้	- (ที่จำเป็น)
source	นี่คือแหล่งที่มาของข้อมูลที่จะใช้คำนวณข้อเสนอแนะ แหล่งที่มาสามารถอยู่ในเครื่อง ดึงข้อมูลล่วงหน้า หรือดึงข้อมูลจากตำแหน่งข้อมูลระยะไกล รายละเอียด	- (ที่จำเป็น)
minLength	ระบุความยาวขั้นต่ำเมื่อคำแนะนำควรปรากฏบนหน้าจอ	1
limit	ระบุจำนวนข้อเสนอแนะสูงสุดที่ควรแสดง	5
highlight	ตัวอักษรที่ตรงกันจากข้อความค้นหาจะถูกเน้นในรายการคำแนะนำ มีการเพิ่มคลาส tt-highlight เพื่ออำนวยความสะดวกในการจัดแต่งทรงผม	true
autoSelect	หากตั้งค่าเป็นจริง ให้เลือกคำแนะนำที่แสดงรายการแรกไว้ล่วงหน้า	false
hint	อัปเดตตัวยึดตำแหน่งอินพุตให้เท่ากับคำแนะนำแรกที่ตรงกัน มีการเพิ่มคลาส tt-hint เพื่ออำนวยความสะดวกในการจัดแต่งทรงผม	true
diacritics	ตั้งค่าสถานะเพื่อเปิด/ปิดใช้การออกเสียงภาษาที่สนับสนุนการค้นหา (เช่น การค้นหาโดยการแปลงอักขระที่มีการเน้นเสียงเป็นอักขระที่ไม่เน้นเสียง)	undefined
classNames: Object	วัตถุ classNames สามารถใช้เพื่อตั้งค่าคลาสที่กำหนดเองสำหรับทุกองค์ประกอบ html ที่ถูกฉีดใน DOM รายละเอียด	undefined
templates	ออบเจ็กต์ที่มีเทมเพลตสำหรับส่วนหัว ส่วนท้าย คำแนะนำ กลุ่ม และสถานะ notFound ดูส่วนเทมเพลตเพื่อความชัดเจน	undefined
preventSubmit	หากองค์ประกอบอินพุตของคุณถูกใช้ภายในองค์ประกอบแบบฟอร์ม การตั้งค่าสถานะนี้จะช่วยป้องกันการดำเนินการส่งเริ่มต้นเมื่อกดปุ่ม ENTER	false
onSubmit(event, selectedItem?)	เมื่อคุณต้องการใช้ typeahead ภายนอกองค์ประกอบฟอร์ม ตัวจัดการนี้สามารถใช้เพื่อประมวลผล/ส่งค่าอินพุต ได้รับการทริกเกอร์เมื่อกดปุ่ม ENTER พารามิเตอร์แรกคือเหตุการณ์ของแป้นพิมพ์ และพารามิเตอร์ที่ 2 คือรายการที่เลือกหรือไม่ได้กำหนดไว้หากไม่มีการเลือกรายการใดเลย	undefined
display(selectedItem, event?) => string	การโทรกลับนี้จะดำเนินการเมื่อผู้ใช้เลือกรายการจากคำแนะนำ คำแนะนำ/รายการปัจจุบันถูกส่งผ่านเป็นพารามิเตอร์ และจะ ต้องส่งคืนสตริง ที่ตั้งค่าเป็นค่าของอินพุต event พารามิเตอร์ ทางเลือก ที่ 2 คือเหตุการณ์เมาส์/คีย์บอร์ด ซึ่งสามารถใช้เพื่อติดตามการโต้ตอบของผู้ใช้หรือสำหรับการวิเคราะห์ โดยค่าเริ่มต้นจะเป็น null	ส่งกลับการแสดงสตริงของรายการที่เลือก
tokenizer?: (words: string) => string[]	ฟังก์ชัน tokenizer ใช้เพื่อแยกคำค้นหาและข้อมูลการค้นหาตามอักขระที่กำหนด ฟังก์ชันนี้มีประโยชน์เมื่อคุณต้องการค้นหาคำที่เติมเครื่องหมายยัติภังค์หรือคำที่มีคำนำหน้า/ต่อท้ายที่แน่นอน	คำจะถูกแบ่งตามอักขระเว้นวรรค (บรรทัดใหม่ แท็บ ช่องว่าง)
listScrollOptions?: ScrollIntoViewOptions	ช่วยให้สามารถควบคุมพฤติกรรมการเลื่อนอย่างละเอียดสำหรับรายการคำแนะนำจำนวนมากที่จำเป็นต้องเลื่อน ตัวเลือกเหล่านี้จะถูกส่งผ่านไปยังฟังก์ชัน scrollIntoView() MDN อ้างอิง	{ block: "nearest", inline: "nearest", behaviour: "auto"}
retainFocus	พารามิเตอร์นี้มีประโยชน์ในการควบคุมการโฟกัสไปที่การกดปุ่ม "Tab" เมื่อเปิดรายการคำแนะนำ หากเปิดใช้งาน จะเลือกตัวเลือกที่ไฮไลต์ จากนั้นจึงคืนค่าโฟกัสไปที่อินพุตการค้นหา หากปิดใช้งาน การกด "Tab" จะเลือกตัวเลือกที่ไฮไลต์ & นำโฟกัสไปที่รายการที่สามารถโฟกัสได้ถัดไปในแบบฟอร์มของคุณ	true
hooks	ตัวเลือกการกำหนดค่า hooks มีประโยชน์ในการรันโค้ดตามอำเภอใจในช่วงเวลาที่กำหนดในวงจรชีวิตของการพิมพ์ล่วงหน้า รายละเอียด	ไม่ได้กำหนด

---

- แหล่งที่มา

นี่คือแหล่งข้อมูลที่จะให้คำแนะนำ นี่เป็นรูปแบบที่คาดหวังของออบเจ็กต์ต้นฉบับ

 source: {
  local: [],
  remote: {
    url: 'https://remoteapi.com/%QUERY', // OR "url: (inputQuery: string) => `https://remoteapi.com/${inputQuery}`"
    wildcard: '%QUERY',
    debounce: 300             // optional, default => 200ms
    requestOptions: {}        // optional, default => undefined
  },
  prefetch: {
    url: 'https://remoteapi.com/load-suggestions', // OR `url: () => string`
    when: 'onFocus',          // optional, default => 'onInit'
    done: false,              // optional, default => false
    process: (items) => void, // optional, default => undefined
    requestOptions: {}        // optional, default => undefined
  },
  keys: ['...'],        // optional  (required when source => Object[])
  groupKey: '...',     // optional, default => undefined
  identity: (item) => string, // optional (determines uniqueness of each suggestion)
  transform: function (data) {
    // modify source data if needed & return it
    return data;
  }
}

• ท้องถิ่น : แหล่งข้อมูล local จะใช้เมื่อคุณต้องการให้คำแนะนำจากแหล่งข้อมูลในเครื่องเช่นตัวแปร
• การดึงข้อมูลล่วงหน้า : แหล่งข้อมูลการดึงข้อมูล prefetch จะใช้เมื่อคุณต้องการโหลดคำแนะนำล่วงหน้าจากตำแหน่งข้อมูลระยะไกลล่วงหน้า คุณต้องระบุพารามิเตอร์ url ที่ชี้ไปยังจุดสิ้นสุดที่จะส่งคืนคำแนะนำ คุณสามารถระบุพารามิเตอร์ทางเลือก when ซึ่งกำหนดว่าคำขอดึงข้อมูลล่วงหน้าจะเกิดขึ้นเมื่อใด โดยค่าเริ่มต้นจะเป็น onInit ซึ่งหมายความว่าคำแนะนำจะถูกโหลดไว้ล่วงหน้าทันทีที่การพิมพ์ล่วงหน้าเริ่มต้นขึ้น คุณสามารถตั้งค่าเป็น onFocus ซึ่งจะทำให้คำแนะนำโหลดไว้ล่วงหน้าเฉพาะเมื่อผู้ใช้โฟกัสไปที่ช่องป้อนข้อมูลการค้นหา การตั้งค่าสถานะ done เป็นทางเลือก & สามารถใช้เพื่อปิดใช้งานคำขอดึงข้อมูลล่วงหน้าโดยทางโปรแกรม ค่าเริ่มต้นของมันคือ false จะได้รับการตั้งค่าเป็น true โดยอัตโนมัติเมื่อมีการดึงข้อมูลล่วงหน้าเป็นครั้งแรก (เพื่อป้องกันคำขอเครือข่ายหลายรายการ) โดยการตั้งค่า done: true คำขอดึงข้อมูลล่วงหน้าจะไม่เกิดขึ้น ตัวอย่างการใช้งานในการดำเนินการนี้คือ เมื่อคุณใช้ localStorage เพื่อจัดเก็บคำแนะนำ แต่ localStorage ได้จัดเก็บคำแนะนำไว้แล้วก่อนหน้านี้ ดังนั้นจึงไม่จำเป็นต้องดึงข้อมูลล่วงหน้าอีกครั้ง process(suggestions) เป็นทางเลือก จะได้รับการดำเนินการหลังจากการร้องขอการดึงข้อมูลล่วงหน้าเกิดขึ้น ได้รับคำแนะนำที่แปลงแล้วเป็นพารามิเตอร์ & เป็นตัวอย่างสามารถใช้เพื่อจัดเก็บคำแนะนำที่ได้รับใน localStorage เพื่อใช้ในภายหลัง
• ระยะไกล : แหล่งข้อมูล remote จะใช้เมื่อคุณต้องการสอบถามตำแหน่งข้อมูลระยะไกลเพื่อดึงข้อมูล
• สัญลักษณ์แทน : ขณะใช้แหล่งข้อมูล remote คุณต้องตั้ง url และตัวเลือก wildcard wildcard จะถูกแทนที่ด้วยสตริงการค้นหาขณะดำเนินการตามคำขอ
• Debounce : ตัวเลือก debounce ใช้เพื่อชะลอการดำเนินการคำขอ http (เป็นมิลลิวินาที) เป็นทางเลือก & มีค่าเริ่มต้นที่ 200ms
• RequestOptions : Fetch API ใช้เพื่อค้นหาจุดสิ้นสุดระยะไกล คุณสามารถระบุวัตถุของ requestOptions เพื่อปรับแต่งคำขอขาออก ตามค่าเริ่มต้น ประเภทการสืบค้นคือ GET
• การแปลง : คุณสามารถจัดเตรียมฟังก์ชันทางเลือก transform() ซึ่งได้รับการเรียกทันทีหลังจากที่ปลายทางที่ดึงข้อมูลล่วงหน้า/ระยะไกลส่งคืนการตอบกลับ คุณสามารถแก้ไขการตอบกลับก่อนที่จะได้รับการประมวลผลตามการพิมพ์ล่วงหน้า
• คีย์ : จำเป็นต้องใช้อาร์เรย์ keys เมื่อแหล่งข้อมูลเป็นอาร์เรย์ของออบเจ็กต์ ปุ่มแรก ใช้เพื่อระบุคุณสมบัติของออบเจ็กต์ที่ควรใช้เป็นข้อความในการแสดงคำแนะนำ ตัวอย่างเช่น สมมติว่าแหล่งข้อมูลมีลักษณะดังนี้:

 /* Example Data source */
[
  { id : 1 , color : "Yellow" , meta : { colorCode : "YW" } } ,
  { id : 2 , color : "Green" , meta : { colorCode : "GN" } , shade : "Greenish" } ,
  { id : 3 , color : "Olive" , meta : { colorCode : "OV" } , shade : "Greenish" } ,
  ...
]

ตอนนี้หากเราต้องการใช้ข้อความที่กำหนดไว้ในคุณสมบัติ color เพื่อให้ปรากฏเป็นคำแนะนำ คีย์ต่างๆ จะต้องรวม สี เป็นคีย์แรก (เช่น keys: ["color"] )

หากคุณต้องการเพิ่มคุณสมบัติเพิ่มเติมให้กับดัชนีการค้นหา คุณสามารถระบุคุณสมบัติเหล่านั้นในอาร์เรย์ keys ได้เช่นกัน สิ่งนี้สามารถเข้าใจได้ดีที่สุดด้วยตัวอย่าง ลองใช้แหล่งข้อมูลตัวอย่างเดียวกันกับที่แสดงด้านบน จะเป็นอย่างไรถ้าคุณต้องการค้นหาสีด้วยคุณสมบัติอื่น ( colorCode ) และไม่ใช่แค่เพียง สี เท่านั้น ในการทำเช่นนั้น เพียงตั้ง keys: ["color", "meta.colorCode"] หากคุณค้นหา " YW " คำแนะนำ "สีเหลือง" จะปรากฏขึ้นตามที่คาดไว้

• groupKey : หากคุณต้องการจัดกลุ่มคำแนะนำของคุณ ให้ตั้งค่าตัวเลือกการกำหนดค่า groupKey อีกครั้ง โดยใช้แหล่งข้อมูลตัวอย่างเดียวกันกับด้านบน เมื่อคุณตั้งค่า groupKey: "shade" คำแนะนำจะถูกจัดกลุ่มตามคุณสมบัติ " shade " ในตัวอย่างนี้ สี Green และ Olive จะปรากฏใต้กลุ่ม " Greenish " ( shade ) ในขณะที่สี เหลือง จะไม่มีกลุ่ม groupKey ยังรองรับการเข้าถึงคุณสมบัติที่ซ้อนกันโดยใช้เครื่องหมายจุด (ตัวอย่าง - groupKey: "category.title" )
• Identity : ฟังก์ชัน identity() ใช้เพื่อกำหนดเอกลักษณ์ของคำแนะนำแต่ละรายการ ได้รับข้อเสนอแนะเป็นพารามิเตอร์และต้องส่งคืนสตริงที่ไม่ซ้ำกับคำแนะนำที่กำหนด นี่เป็นคุณสมบัติทางเลือกและมีค่าเริ่มต้นในการส่งคืนค่าที่เกี่ยวข้องกับ คีย์แรก เช่น keys[0] อย่างไรก็ตาม ค่าเริ่มต้นอาจไม่ทำงานทุกครั้ง ตัวอย่างเช่น พิจารณารหัสต่อไปนี้ -

 /* Example Data source of Songs */
[
  { title : "God is Good" , artist : "Don Moen" } ,
  { title : "God is Good" , artist : "Paul Wilbur" } ,
  { title : "God is Good" , artist : "Micheal Smith" } ,
  { title : "El Shaddai" , artist : "Amy Grant" } ,
  ...
]

สมมติว่าคีย์ถูกตั้งค่าเป็น keys: ["title"] ตามค่าเริ่มต้น ฟังก์ชัน identity() จะใช้ คีย์แรก (เช่น title ) เพื่อกำหนดเอกลักษณ์ ดังนั้นหากคุณค้นหา God คุณจะพบคำแนะนำเพียง 1 รายการที่แสดงเนื่องจากมี 3 เพลงที่มี title เหมือนกันทุกประการ ในการแสดงคำแนะนำทั้ง 3 รายการกับศิลปินที่แตกต่างกัน คุณต้องตั้งค่าคุณสมบัติ identity ให้ส่งกลับสตริงที่ไม่ซ้ำ -

 identity ( item ) = > ` ${ item . title } ${ item . artist } ` ;

ขอแนะนำอย่างยิ่ง ให้ตั้งค่าตัวเลือกการกำหนดค่า identity() เพื่อส่งคืนสตริงที่ไม่ซ้ำเมื่อแหล่งข้อมูลของคุณเป็นอาร์เรย์ของออบเจ็กต์

ชำระเงิน ตัวอย่างสด เพื่อความชัดเจนเพิ่มเติม

---

- ตะขอ

ขณะนี้มีตะขอเพียง 1 อันเท่านั้น:

1. updateHits: async (resultSet, loader) => Promise<resultSet> ซึ่งดำเนินการก่อนที่ผลการค้นหาจะแสดงต่อผู้ใช้ & สามารถใช้เพื่อแทนที่ข้อเสนอแนะที่ส่งคืนโดยดัชนีการค้นหา (มีประโยชน์สำหรับการเรียงลำดับแบบกำหนดเอง การกรอง การเพิ่มหรือการลบผลลัพธ์ ฮุคนี้เป็นฟังก์ชันอะซิงก์ที่ช่วยให้คุณสามารถส่งคำขอ AJAX เพื่อดึงผลลัพธ์ใหม่ได้หากจำเป็น)

 // Example usage of "updateHits" hook
typeahead ( {
  input : document . querySelector ( ".myInput" ) ,
  source : {
    local : [ ] ,
    // ...
  } ,
  hooks : {
    updateHits : async ( resultSet , loader ) => {
      resultSet . hits . push ( { name : "new suggestion" } ) ; // add new suggestion
      // resultSet.hits.filter( ... ); // filter the suggestions
      // resultSet.hits.sort( ... );   // custom sort the suggestions
      // resultSet.count = 5000;       // to set the total results found

      /*** You can also make an AJAX request to fetch results ***/
      // loader(); // display the loader template
      // const response = await fetch('https://example.com');
      // const text = await response.text();
      // resultSet.hits = text && JSON.parse(text);
      // loader(false); // hide the loader template

      // resultSet.updateSearchIndex = true; // updates search index if necessary. Default `false`

      return resultSet ; // you must return the resultSet
    } ,
  } ,
  templates : {
    loader : ( ) => { ... } ,
  }
} ) ; 

---

- การจัดสไตล์ (css)

รูปแบบพื้นฐานบางอย่างมีให้พร้อมกับการพิมพ์ล่วงหน้า UI นั้นขึ้นอยู่กับคุณอย่างสมบูรณ์และปรับแต่งได้ตามพิกเซลของตัวเอง คุณสามารถใช้คลาสต่อไปนี้เพื่อเพิ่ม/แทนที่สไตล์

• html ทั้งหมดถูกห่อไว้ในคอนเทนเนอร์ที่มีคลาส typeahead-standalone
• องค์ประกอบอินพุตมีคลาส tt-input
• องค์ประกอบคำใบ้มีคลาส tt-hint
• รายการข้อเสนอแนะจะรวมอยู่ในคอนเทนเนอร์ที่มีคลาส tt-list (คลาส tt-hide จะถูกเพิ่มเมื่อไม่มีข้อเสนอแนะ)
• ข้อเสนอแนะแต่ละรายการมีคลาส tt-suggestion และหากข้อเสนอแนะถูกเลือก ก็จะมีคลาส tt-selected เพิ่มเติม
• หากตั้งค่าตัวเลือกการกำหนดค่าไฮไลต์เป็น true ทุกบล็อกข้อความที่ไฮไลต์จะมีคลาส tt-highlight

จัดแต่งทรงผมไม่เกินเวอร์ชัน 3.xx

คุณสามารถเพิ่มสไตล์ของคุณเองได้โดยการกำหนดเป้าหมายตัวเลือกหลัก .typeahead-standalone ตัวอย่างเช่น เราสามารถอัปเดตสีพื้นหลังของทุกคำแนะนำได้ตามที่เห็นด้านล่าง -

 /* set background color for each suggestion */
. typeahead-standalone . tt-list . tt-suggestion {
  background-color : green;
}

หากต้องการ แทนที่ สไตล์เริ่มต้น ให้ตั้งค่าตัวเลือกการกำหนด className และใช้เป็นตัวเลือก สมมติว่าคุณตั้ง className: "my-typeahead" จากนั้นหากต้องการแทนที่สไตล์เมื่อโฮเวอร์/เลือกคำแนะนำ คุณสามารถใช้:

 /* override styles */
. typeahead-standalone . my-typeahead . tt-list . tt-suggestion : hover ,
. typeahead-standalone . my-typeahead . tt-list . tt-suggestion . tt-selected {
 color : black;
 background-color : white;
}

จัดแต่งทรงผมสำหรับเวอร์ชัน 4.xx ขึ้นไป

ตั้งแต่ v4.0 เป็นต้นไป JS และ CSS จะถูกแยกออกจากกัน ทำให้สามารถควบคุมสไตล์ได้มากขึ้น คุณสามารถดึง CSS ทั้งหมดจาก CDN หรือจากด้านล่าง และคัดลอกลงในโปรเจ็กต์ของคุณได้โดยตรง เพื่อให้คุณสามารถละทิ้ง/แทนที่สไตล์ใดๆ ได้ตามความจำเป็น

 /***** basic styles *****/
. typeahead-standalone {
  position : relative;
  text-align : left;
  color : # 000 ;
}
. typeahead-standalone . tt-input {
  z-index : 1 ;
  background : transparent;
  position : relative;
}
. typeahead-standalone . tt-hint {
  position : absolute;
  left : 0 ;
  cursor : default;
  user-select : none;
  background : # fff ;
  color : silver;
  z-index : 0 ;
}
. typeahead-standalone . tt-list {
  background : # fff ;
  z-index : 1000 ;
  box-sizing : border-box;
  overflow : auto;
  border : 1 px solid rgba ( 50 , 50 , 50 , 0.6 );
  border-radius : 4 px ;
  box-shadow : 0 px 10 px 30 px 0 px rgba ( 0 , 0 , 0 , 0.1 );
  position : absolute;
  max-height : 70 vh ;
}
. typeahead-standalone . tt-list . tt-hide {
  display : none;
}
. typeahead-standalone . tt-list div [ class ^= "tt-" ] {
  padding : 0 4 px ;
}
. typeahead-standalone . tt-list . tt-suggestion : hover ,
. typeahead-standalone . tt-list . tt-suggestion . tt-selected {
  background : # 55acee ;
  cursor : pointer;
}
. typeahead-standalone . tt-list . tt-suggestion . tt-highlight {
  font-weight : 900 ;
}
. typeahead-standalone . tt-list . tt-group {
  background : # eee ;
}

คุณยังสามารถใช้เทมเพลตเพื่อเพิ่มส่วนหัว ส่วนท้าย และจัดรูปแบบคำแนะนำแต่ละรายการเพิ่มเติมได้

- เทมเพลต

เทมเพลตสามารถใช้เพื่อปรับแต่งการเรนเดอร์ของรายการได้ การใช้งานของพวกเขาเป็นทางเลือกที่สมบูรณ์ ปัจจุบันมีเทมเพลตให้เลือก 7 แบบ -

templates: {
  header : ( resultSet ) => '<h1>List of Countries</h1>' , /* Rendered at the top of the dataset */
  footer : ( resultSet ) => '<div>See more</div>' , /* Rendered at the bottom of the dataset */
  suggestion : ( item , resultSet ) => {   /* Used to render a single suggestion */
    return `<div class="custom-suggestion"> ${ item . label } </div>` ;
  } ,
  group : ( groupName , resultSet ) => {   /* Used to render a group */
    return `<div class="custom-group"> ${ groupName } </div>` ;
  } ,
  empty : ( resultSet ) => {   /* Rendered when the input query is empty */
    return `<div>Search for Colors...</div>` ;
    // OR (to display some suggestions by default)
    return [ { title : "France" } , { title : "Spain" } ] ;
  }
  loader : ( ) = > 'Loading...' , /* Rendered while awaiting data from a remote source */
  notFound : ( resultSet ) => '<span>Nothing Found</span>' , /* Rendered if no suggestions are available */
}

ดังที่เห็นข้างต้น แต่ละเทมเพลตจะรับการติดต่อกลับซึ่ง จะต้องส่งคืน string ซึ่งจะถูกตีความในภายหลังว่าเป็น HTML เทมเพลตยังได้รับพารามิเตอร์ resultSet ที่มีโครงสร้างดังแสดงด้านล่าง

 resultSet = {
  query : '...' , // the input query
  hits : [ ... ] , // found suggestions
  count : 0 ,     // the total suggestions found in the search index
  limit : 5 ,     // the number of suggestions to show
  wrapper : DOMElement ,  // the container DOM element
}

เพื่ออำนวยความสะดวกในการจัดสไตล์ แต่ละเทมเพลตจะถูกรวมไว้ในองค์ประกอบ div พร้อมด้วยคลาสที่เกี่ยวข้อง เช่น

• header => คลาส tt-header
• footer => คลาส tt-footer
• suggestion => คลาส tt-suggestion
• group => คลาส tt-group
• loader => คลาส tt-loader
• empty => คลาส tt-empty
• notFound => คลาส tt-notFound

- ชื่อคลาส

ตัวเลือกการกำหนดค่า classNames ช่วยให้คุณสามารถแทนที่ชื่อคลาสเริ่มต้นได้ตามที่คุณเลือก

ชื่อคลาสดีฟอลต์ที่ใช้ภายใน typeahead มีดังนี้:

 const classNames = {
  wrapper : 'typeahead-standalone' ,  /* main container element */
  input : 'tt-input' ,
  hint : 'tt-hint' ,
  highlight : 'tt-highlight' ,
  list : 'tt-list' ,  /* container element for suggestions */
  hide : 'tt-hide' ,
  show : 'tt-show' ,
  selected : 'tt-selected' ,
  /* classes used within templates */
  header : 'tt-header' ,
  footer : 'tt-footer' ,
  loader : 'tt-loader' ,
  suggestion : 'tt-suggestion' ,
  group : 'tt-group' ,
  empty : 'tt-empty' ,
  notFound : 'tt-notFound' ,
} ;

ตามตัวอย่าง หากคุณต้องการใช้ชื่อคลาสอื่นสำหรับองค์ประกอบ อินพุต คุณสามารถเริ่มต้นการพิมพ์ล่วงหน้าได้ดังนี้ -

 typeahead ( {
  input : '...' ,
  source : '...' ,
  classNames : {
    input : 'my-custom-input-class'  // this class is used instead of tt-input
  }
} ) ;

---

เอพีไอ

• typeahead.reset()
• typeahead.addToIndex()
• typeahead.destroy()

พิมพ์ข้างหน้า reset(clearLocalSrc?: boolean)

รีเซ็ตอินสแตนซ์ typeahead ให้เป็นสถานะเดิมก่อนที่ผู้ใช้จะโต้ตอบ โดยจะลบรายการทั้งหมดออกจากดัชนีการค้นหา ยกเว้นรายการที่เพิ่มผ่านแหล่งที่มาในเครื่อง หากต้องการลบรายการทั้งหมดออก ฟังก์ชันจะยอมรับพารามิเตอร์ทางเลือกซึ่งควรตั้งค่าเป็น true Reset() ยังล้างคำขอระยะไกลที่แคชไว้

 const instance = typeahead ( { /* options */ } ) ;
// clear search index except items added via Local source
instance . reset ( ) ;

// clears entire search index
instance . reset ( true ) ;

API นี้มีประโยชน์ในสถานการณ์ที่คุณต้องการทำให้ข้อมูลเป็นโมฆะหลังจากผ่านไประยะหนึ่ง

พิมพ์ข้างหน้า addToIndex()

เพิ่มรายการลงในดัชนีการค้นหา มีประโยชน์เมื่อคุณต้องการดึงข้อมูลด้วยตัวเองแล้วเพิ่มลงในดัชนีการค้นหา คล้ายกับการเพิ่มรายการผ่านแหล่งที่มาในเครื่อง

 const instance = typeahead ( { /* options */ } ) ;
instance . reset ( true ) ; // or instance.reset();
instance . addToIndex ( [ 'Blue, Baige , Black' ] ) ; 

พิมพ์ข้างหน้า destroy()

ทำลายอินสแตนซ์ typeahead ล้างดัชนีการค้นหา ลบตัวจัดการเหตุการณ์ทั้งหมด และล้าง DOM สามารถใช้ได้หากคุณต้องการปิดการใช้งานการพิมพ์ล่วงหน้า

 const instance = typeahead ( { /* options */ } ) ;
instance . destroy ( ) ;

---

รหัสข้อผิดพลาด

ต่อไปนี้เป็นอภิธานศัพท์เล็กๆ น้อยๆ ของรหัสข้อผิดพลาดที่อาจเกิดขึ้นได้

รหัส	คำอธิบาย
e01	องค์ประกอบ DOM อินพุตหายไป
e02	แหล่งที่มาของข้อเสนอแนะหายไป/ไม่ถูกต้อง คุณต้องระบุแหล่งที่มาที่เป็นไปได้อย่างน้อย 1 ใน 3 รายการ - ภายในเครื่อง ดึงข้อมูลล่วงหน้า หรือระยะไกลด้วยรูปแบบแหล่งที่มาที่ต้องการ (อ้างอิง)
e03	กุญแจหาย
e04	คำขอดึงข้อมูลล่วงหน้าล้มเหลว
e05	คำขอระยะไกลล้มเหลว

---

?มีส่วนช่วย

สนใจที่จะสนับสนุนคุณสมบัติและการแก้ไขหรือไม่?

อ่านเพิ่มเติมเกี่ยวกับการบริจาค

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

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

- ใบอนุญาต

เอ็มไอที © DigitalFortress