在購物網站、瀏覽器、地圖等等地方搜尋欄是隨處可見的東西，在這邊我們要教大家如何在地圖中利用Antd的AutoComplete來實踐搜尋功能。當我們按下enter鍵後會將畫面帶到該景點的詳細介紹頁面。

1.匯入必要的套件與定義基本狀態：

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Row, Col, Button, AutoComplete, Input } from 'antd';

這邊的useNavigate是切換頁面會用的，那我們也先在這邊定義好。

const [options, setOptions] = useState([]);  // 搜尋選項
const navigate = useNavigate();

const onSelect = (value, option) => {
	navigate(`/places/id/${option.id}`);
};

2.實現搜尋建議功能：

filter() ：方法會篩選出符合條件的景點。這裡的條件是每個 landmark.name 是否包含搜尋字串。
toLowerCase ：忽略大小寫差異，舉例來說，搜尋Osaka時，打成小寫的o也可以搜尋的到，是相當的方便。
setOptions()：將篩選和轉換後的 searchResults 更新到 options 狀態，這樣 AutoComplete 元件就會顯示這些建議選項。

// 當使用者輸入時動態提供搜尋建議
const handleSearch = (value) => {
    const searchResults = landmarks
        .filter(landmark => 
            landmark.name.toLowerCase().includes(value.toLowerCase()))
        .map(landmark => ({
            value: landmark.name,
            id: landmark.id,  // 加入 ID 以便搜尋後導覽
        }));

    setOptions(searchResults);
};

3.完成搜尋的Onsearch事件：

onSearch 函數：

• 這個函數是處理使用者按下 Enter 鍵後觸發的行為，通常與 Input.Search 或其他輸入元件綁定。
• value 是使用者在搜尋欄中輸入的文字。

landmarks.find()：

• find() 是一個 JavaScript 陣列方法，用來找到第一個符合條件的元素。
• 這裡，find() 會遍歷 landmarks 陣列（包含所有景點資訊），並尋找與 value（使用者輸入的文字）相匹配的景點名稱。

navigate()：

• navigate() 是由 react-router-dom 提供的用來進行路由導航的方法。
• 當找到匹配的景點後，navigate() 會將使用者導覽到該景點的詳細頁面，這裡的路徑是 /places/id/${selectedPlace.id}，其中 ${selectedPlace.id} 是該景點的唯一的id。

// 處理按下 Enter 鍵後的行為
const onSearch = (value) => {
    const selectedPlace = landmarks.find
        (landmark => landmark.name.toLowerCase() === value.toLowerCase());
    if (selectedPlace) {
        navigate(`/places/id/${selectedPlace.id}`);
    }
};

4.將搜尋欄放到程式中：

{/* 搜尋欄 */ }
<Row justify="center" className={styles.searchRow}>
    <Col span={18}>
        <AutoComplete
            options={options}
            onSearch={handleSearch}
            onSelect={onSelect}
            style={{ width: '65%' }}
        >
            <Input.Search
                placeholder="搜尋景點"
                enterButton
                onSearch={onSearch}  // 處理 Enter 鍵觸發導航
            />
        </AutoComplete>
    </Col>
</Row>

5.實際畫面：

可以看到就算大小寫錯誤，還有第一個字母不是o的時候，搜尋欄位也能根據我們JSON檔中的資料為我們提供搜尋建議。

6.總結：

今天透過antd中的AutoComplete來完成搜尋欄的功能，包含搜尋建議、將頁面跳到該景點的詳細介紹頁面，算是一個簡單實用的功能。其中的filter的篩選、navigate的導覽語法是這篇比較重要的內容，希望大家能順利完成這個簡單實用的功能!接下來，我們要完成將景點加入到收藏、建立行程的功能，我們會帶大家了解Redux的基本用法與安裝!