การตั้งค่า Ant Design Select ให้ Filter ด้วย Label

Web Development

การตั้งค่า Ant Design Select ให้ Filter ด้วย Label

วิธีเปลี่ยนการ Filter ใน Select ของ Ant Design ให้ใช้ Label ในการค้นหา เพื่อความสะดวกในการใช้งาน

6 วันที่ผ่านมา

1 min read

สำหรับใครที่ใช้ antd และกำลังมองหาวิธีการเปลี่ยนเงื่อนไขการ Filter ใน Select ให้ filter ตาม label แทน วิธีการนั้นง่ายมาก เพียงใส่ props ที่ชื่อ optionFilterProp="label" เพื่อเป็นการเปลี่ยนจากจาก filter ตาม value มาเป็น filter ตาม label แทน และใส่ showSearch เพื่อเปิดใช้งานการค้นหา ก็เป็นอันใช้ได้

ตัวอย่าง Code

<Select
  showSearch
  placeholder="Select a favorite color"
  optionFilterProp="label"
  options={[
    {
      value: "red",
      label: "สีแดง",
    },
    {
      value: "green",
      label: "สีเขียว",
    },
    {
      value: "yellow",
      label: "สีเหลือง",
    },
  ]}
/>

Result

ผลลัพธ์ก็จะเป็นประมาณนี้

Tags:

Ant Design