第十二天：權息通服務網站【三】

• 增加搜尋欄位內容

import InputBase from '@mui/material/InputBase';
import IconButton from '@mui/material/IconButton';
import SearchIcon from '@mui/icons-material/Search';

                <Box minWidth={275}>
                    <Box>
                        <InputBase
                            fullWidth
                            sx={{ ml: 1, flex: 1 }}
                            placeholder="請輸入股票代號或名稱"
                            inputProps={{ 'aria-label': '請輸入股票代號或名稱' }}
                            value={search}
                            onChange={handleSearchChange}
                            endAdornment={
                                <IconButton type="button" sx={{ p: '10px' }} aria-label="search"
                                    onClick={() => {
                                        axios.get(STOCK_API_URL,{
                                            params: {
                                                search
                                            }
                                        }).then(({data}) => {
                                            const {allAvgCashYields,
                                                allAvgRetroactiveYields,
                                                amountOfDividend,
                                                amountOfSuccess,
                                                dividendYearEnd,
                                                dividendYearStart,
                                                successRate,
                                                id,
                                                name} = data;
                                            setAllAvgCashYields(allAvgCashYields.toFixed(2));
                                            setAllAvgRetroactiveYields(allAvgRetroactiveYields.toFixed(2));
                                            setAmountOfDividend(amountOfDividend);
                                            setAmountOfSuccess(amountOfSuccess);
                                            setDividendYearEnd(dividendYearEnd);
                                            setDividendYearStart(dividendYearStart);
                                            setSuccessRate(successRate.toFixed(2));
                                            setId(id);
                                            setName(name);
                                        }).catch((error) => {
                                            setOpen(true);
                                            setErrorMessage(error);
                                        });
                                    }}
                                >
                                    <SearchIcon />
                                </IconButton>
                            }
                        />

                    </Box>

• 增加自動完成搜尋欄位函式

import React, { useEffect } from 'react';

import Autocomplete from '@mui/material/Autocomplete';
import InputAdornment from '@mui/material/InputAdornment';

const STOCK_LIST_API_URL = 'http://localhost:3000/stocks';

    const [stocks, setStocks] = React.useState([]);

    useEffect(() => {
        axios.get(STOCK_LIST_API_URL).then(({data}) => {
            setStocks(data);
        }).catch((error) => {
            setOpen(true);
            setErrorMessage(error);
        });
    }, []); 

                        <Autocomplete
                            id="combo-box-demo"
                            options={stocks}
                            style={{ width: 300 }}
                            renderInput={params => {
                                return (
                                    <TextField
                                        {...params}
                                        label="Combo box"
                                        variant="outlined"
                                        fullWidth
                                        InputProps={{
                                            ...params.InputProps,
                                            endAdornment: (
                                                <InputAdornment position="end">
                                                    <IconButton type="button" sx={{ p: '10px' }} aria-label="search"
                                                        onClick={() => {
                                                            const value = params.inputProps.value  as string;
                                                            const [search, ...rest] = value.split(' ');
                                                            axios.get(STOCK_API_URL,{
                                                                params: {
                                                                    search
                                                                }
                                                            }).then(({data}) => {
                                                                const {allAvgCashYields,
                                                                    allAvgRetroactiveYields,
                                                                    amountOfDividend,
                                                                    amountOfSuccess,
                                                                    dividendYearEnd,
                                                                    dividendYearStart,
                                                                    successRate,
                                                                    id,
                                                                    name} = data;
                                                                setAllAvgCashYields(allAvgCashYields.toFixed(2));
                                                                setAllAvgRetroactiveYields(allAvgRetroactiveYields.toFixed(2));
                                                                setAmountOfDividend(amountOfDividend);
                                                                setAmountOfSuccess(amountOfSuccess);
                                                                setDividendYearEnd(dividendYearEnd);
                                                                setDividendYearStart(dividendYearStart);
                                                                setSuccessRate(successRate.toFixed(2));
                                                                setId(id);
                                                                setName(name);
                                                            }).catch((error) => {
                                                                setOpen(true);
                                                                setErrorMessage(error);
                                                            });
                                                        }}
                                                    >
                                                        <SearchIcon />
                                                    </IconButton>
                                                </InputAdornment>
                                            )
                                        }}
                                    />
                                );
                            }}
                        />

• 調整自動完成搜尋欄位風格

                        <Autocomplete
                            id="combo-box-demo"
                            options={stocks}
                            disableClearable
                            forcePopupIcon={false}
                            renderInput={params => {
                                return (
                                    <TextField
                                        {...params}
                                        label="請輸入股票代號或名稱"
                                        variant="outlined"
                                        fullWidth
                                        InputProps={{
                                            ...params.InputProps,
                                            endAdornment: (
                                                <InputAdornment position="end">
                                                    <IconButton type="button" aria-label="search"
                                                        onClick={() => {
                                                            const value = params.inputProps.value  as string;
                                                            const [search, ...rest] = value.split(' ');
                                                            axios.get(STOCK_API_URL,{
                                                                params: {
                                                                    search
                                                                }
                                                            }).then(({data}) => {
                                                                const {allAvgCashYields,
                                                                    allAvgRetroactiveYields,
                                                                    amountOfDividend,
                                                                    amountOfSuccess,
                                                                    dividendYearEnd,
                                                                    dividendYearStart,
                                                                    successRate,
                                                                    id,
                                                                    name} = data;
                                                                setAllAvgCashYields(allAvgCashYields.toFixed(2));
                                                                setAllAvgRetroactiveYields(allAvgRetroactiveYields.toFixed(2));
                                                                setAmountOfDividend(amountOfDividend);
                                                                setAmountOfSuccess(amountOfSuccess);
                                                                setDividendYearEnd(dividendYearEnd);
                                                                setDividendYearStart(dividendYearStart);
                                                                setSuccessRate(successRate.toFixed(2));
                                                                setId(id);
                                                                setName(name);
                                                            }).catch((error) => {
                                                                setOpen(true);
                                                                setErrorMessage(error);
                                                            });
                                                        }}
                                                    >
                                                        <SearchIcon />
                                                    </IconButton>
                                                </InputAdornment>
                                            )
                                        }}
                                    />
                                );
                            }}
                        />

• 增加權息通 logo 和中文字型

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap" rel="stylesheet"/>