SearchBox การควบคุม (ดูตัวอย่าง)

[บทความนี้เป็นคู่มือรุ่นก่อนวางจำหน่าย และอาจจะมีการเปลี่ยนแปลงในอนาคต]

ตัวควบคุมที่ใช้เพื่อสร้างประสบการณ์การค้นหา

คอนโทรล SearchBox

รายละเอียด

ช่องค้นหา (SearchBox) มีช่องป้อนข้อมูลสำหรับค้นหาภายในไซต์หรือแอปเพื่อค้นหารายการเฉพาะ

ส่วนประกอบของโค้ดนี้จัดเตรียมแรปเปอร์รอบตัวควบคุม Fluent UI SearchBox เพื่อใช้ในพื้นที่ทำงานและหน้าแบบกำหนดเอง

สําคัญ

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

คุณสมบัติที่สำคัญ

คุณสมบัติ รายละเอียด
SearchText ข้อความที่ผู้ใช้ป้อน อ้างถึงสิ่งนี้เป็นอินพุตสำหรับฟังก์ชันการค้นหา
IconName ชื่อของไอคอน Fluent UI (ดูที่ ไอคอน Fluent UI)
Underlined ช่องค้นหาขีดเส้นใต้หรือไม่
DisableAnimation ไอคอนช่องค้นหาเคลื่อนไหวเมื่อโฟกัสหรือไม่
PlaceholderText ตัวยึดตำแหน่งสำหรับช่องค้นหา

คุณสมบัติเพิ่มเติม

คุณสมบัติ รายละเอียด
Theme ออบเจ็กต์ Theme (ไม่ใช่รูปแบบ Json) ดูที่ ชุดรูปแบบ สำหรับความช่วยเหลือเกี่ยวกับวิธีกำหนดค่า
AccessibilityLabel ป้ายชื่อ aria สำหรับโปรแกรมอ่านหน้าจอ
InputEvent การส่งเหตุการณ์ไปยังตัวควบคุม เช่น SetFocus

ตัวอย่าง

กำหนดค่าลักษณะการค้นหา

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

สร้างประสบการณ์การค้นหาโดยใช้นิพจน์ ค้นหา() หรือตัวกรอง() ที่ใช้ค่าของคุณสมบัต SearchText ใน SearchBox

Search( Accounts, SearchBox.SearchText, "name" )

Limitations

ส่วนประกอบโค้ดนี้ใช้ได้เฉพาะในแอปพื้นที่ทำงานและหน้าที่กำหนดเองเท่านั้น