วิธีการทำระบบค้นหา Search Filter ด้วย React.js แบบง่ายๆ

React Sep 14, 2023

สวัสดีครับ วันนี้ขอเขียนบทความพื้นฐานเกี่ยวกับ React.js เรื่องของการทำช่องค้นหา หรือการ Search การ Filter ต่างๆ โดยตัวอย่างทั้งหมด เป็นการ search ข้อมูลหน้าเว็บแบบ Client Side อย่างเดียว ไม่ได้ส่งข้อมูลไปค้นหาที่ Server นะครับ

ตัวอย่าง และไฟล์ ลองกดเล่นจากตัวอย่างด้านล่างได้เลย

ปกติแล้ว ใน React.js เนี่ย การที่ Component จะทำการ re-render คือ มันต้องเกิดเหตุการณ์คือ

state มีการเปลี่ยนแปลงค่า
ตัว Parent Component มีการ re-render
Props / หรือ state ของ Hooks มีการเปลี่ยน

ทำ Search แบบง่ายๆ

สำหรับตัวอย่าง เราจะทำ Component ง่ายๆ ขึ้นมา ฉะนั้น ตัว Component ก็จะ re-render เมื่อ State เปลี่ยน วิธีการทำคือ

เมื่อ User กรอกข้อมูลใน <input /> เราก็ทำการ setState
ทุกครั้งที่ state เปลี่ยน มันก็จะทำการ re-render
จังหวะที่ re-render เราก็นำข้อมูลใน <input /> ไปค้นหากับ data ที่เราต้องการค้นหา
การค้นหาว่าคำหรือตัวอักษรนั้นๆ อยู่ใน String ใช้ includes
นำข้อมูลที่ค้นหามาแสดงใน render()

ตัวอย่างโค๊ดง่ายๆ คือ

import { useState } from 'react'

import './style.css'

const names = [
  'Terrell Conn',
  'Janet Kuvalis',
  'Donald Pfeffer',
  'Natalie Walker',
  'Iris Botsford',
  'Billie Wilderman',
  'Carlton Keebler',
  'Carroll Ryan',
  'Barry Padberg',
  'Essie Adams',
]

export const App = () => {
  const [searchQuery, setSearchQuery] = useState('')

  return (
    <div>
      <h1>Search Filter</h1>
      <input
        type="text"
        placeholder="Search..."
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
      />

      {names.map((name) => {
        return <p>{name}</p>
      })}
    </div>
  )
}

ต่อมา เมื่อ user ใส่ค่าลงไป จะเรียก onChange เพื่อไป setSearchQuery ทีนี้เมื่อ state เปลี่ยน มันจะก็จะ re-render ใหม่ ทีนี้ อยากให้ list เปลี่ยน เราก็ต้องเพิ่ม การค้นหา โดยเอาค่าที่ใส่พิมพ์ใน input ไปหากับค่า names ที่เป็น list แบบนี้

  const filteredNames = names.filter((name) =>
    name.trim().toLowerCase().includes(searchQuery.trim().toLowerCase()),
  )

ใช้ trim() เพื่อตัดช่องว่าง และ toLowerCase() เพื่อให้เวลาค้นหา ไม่สนใจตัวพิมพ์เล็ก พิมพ์ใหญ่

จากนั้น ใน render() จากที่ใช้ค่า names ก็เปลี่ยนไปใช้ค่า filteredNames แทน

{filteredNames.map((name) => {
  return <p>{name}</p>
})}

สุดท้าย ก็ได้โค๊ดง่ายๆ แบบนี้

import { useState } from 'react'

import './style.css'

const names = [
  'Terrell Conn',
  'Janet Kuvalis',
  'Donald Pfeffer',
  'Natalie Walker',
  'Iris Botsford',
  'Billie Wilderman',
  'Carlton Keebler',
  'Carroll Ryan',
  'Barry Padberg',
  'Essie Adams',
]

export const App = () => {
  const [searchQuery, setSearchQuery] = useState('')

  const filteredNames = names.filter((name) =>
    name.trim().toLowerCase().includes(searchQuery.trim().toLowerCase()),
  )

  return (
    <div>
      <h1>Search Filter</h1>
      <input
        type="text"
        placeholder="Search..."
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
      />

      {filteredNames.map((name) => {
        return <p>{name}</p>
      })}
    </div>
  )
}