从React中的单词数组搜索引擎

Question

我有一些要在搜索引擎中使用的名称。当我单击我的DropDown时，我不想立即看到该列表，但我希望在输入第一个字母后看到第一个结果。

const assets = ["ADABTC", "AIONBTC", "ALGOBTC", "ARDRBTC", "KAVABTC", "ETHBTC", "ETCBTC"]

此处编码

import React, { useState } from "react";

const assets = ["ADABTC", "AIONBTC", "ALGOBTC", "ARDRBTC", "KAVABTC", "ETHBTC", "ETCBTC"]

export default function App() {
  const [queries, setQueries] = useState([]);
  const [symbol, setSymbol] = useState("");
  const [price, setPrice] = useState("");

  const onChangeSymbol = e => {
    setSymbol(e.target.value);
  };

  const onChangePrice = e => {
    setPrice(e.target.value);
  };

  var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date+' '+time;

  const onClick = () => {
    if (symbol !== "" && price !== "") {
      setQueries((queries) => {
        return [ ...queries, `${symbol}`+' '+`Price:${price}`+' '+'Date:'+dateTime]
      });
      setSymbol("");
      setPrice("");
    }
  }

  return (
    <div id="DropDownArea" className="DropDownField">
      <div  id="PriceAlertHistory">
        <h6>Price Alert History</h6>
      </div>
      <ul>
        {queries.map(query => <li>{query}</li>)}
      </ul>
      <input
        type="text"
        placeholder="Symbol"
        value={symbol}
        onChange={onChangeSymbol}
      />
      <input
        type="number"
        placeholder="Price"
        value={price}
        onChange={onChangePrice}
      />
      <button type="submit" onClick={onClick}>Set</button>
    </div>
  );
}

目标：我不会在第一个输入字段中为名称创建搜索查询。

示例：我写了AR，我想出现ARDRBTC，我想单击它（或输入新闻），而全名（ARDRBTC）出现在文本输入字段中，或者我写了{{ 1}}，然后我收到ET和ETHBTC的结果，我可以单击以填充输入字段。

由于ETCBTC中将有超过100个，所以我真的希望通过名称创建搜索引擎。

此屏幕截图类似

EDIT1

在@ alexAV-dev回答后，单击ADABTC并单击assets按钮后，我得到了答案。底部的ADABTC仍然存在，如何使其单击后消失？例如截图

Answer 1

尝试一下。我解决了你的要求

import React, { useState, useEffect } from "react";

const assets = [
  "ADABTC",
  "AIONBTC",
  "ALGOBTC",
  "ARDRBTC",
  "KAVABTC",
  "ETHBTC",
  "ETCBTC"
];

export default function App() {
  const [queries, setQueries] = useState([]);
  const [symbol, setSymbol] = useState("");
  const [price, setPrice] = useState("");
  const [dropdown, setDropdown] = useState([]);

  const onChangeSymbol = e => {
    setSymbol(e.target.value);
  };

  const onChangePrice = e => {
    setPrice(e.target.value);
  };

  var today = new Date();
  var date =
    today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
  var time =
    today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  var dateTime = date + " " + time;

  const onClick = () => {
    if (symbol !== "" && price !== "") {
      setQueries(queries => {
        return [
          ...queries,
          `${symbol}` + " " + `Price:${price}` + " " + "Date:" + dateTime
        ];
      });
      setSymbol("");
      setPrice("");
    }
  };

  useEffect(() => {
    if (symbol !== "" && symbol !== assets.find(rec => rec === symbol)) {
      setDropdown(assets.filter(rec => rec.indexOf(symbol) > -1));
    } else {
      setDropdown([]);
    }
  }, [symbol]);

  return (
    <div id="DropDownArea" className="DropDownField">
      <div id="PriceAlertHistory">
        <h6>Price Alert History</h6>
      </div>
      <ul>
        {queries.map(query => (
          <li>{query}</li>
        ))}
      </ul>
      <input
        type="text"
        placeholder="Symbol"
        value={symbol}
        onChange={onChangeSymbol}
      />
      <input
        type="number"
        placeholder="Price"
        value={price}
        onChange={onChangePrice}
      />
      <button type="submit" onClick={onClick}>
        Set
      </button>
      <ul>
        {dropdown.length !== 0
          ? dropdown.map(asset => {
              return (
                <li
                  onClick={() => {
                    setSymbol(asset);
                    setDropdown([]);
                  }}
                >
                  {asset}
                </li>
              );
            })
          : false}
      </ul>
    </div>
  );
}

如果要在按下“设置”时完全隐藏下拉菜单。

您可以在onClick函数中添加一个字符串

setDropdown([])