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

Web Development

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

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

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

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