React实现option双字段显示与名称搜索，选中仅返回symbol

数据老陈

2026-8-5

解决方案

1. 修改datalist选项，同时展示股票代码和名称

原来的option仅设置了value为股票代码，现在需要在option标签内添加显示文本，同时保留value为股票代码——这样下拉列表会展示代码-名称的组合，且选中后输入框自动填充代码：

<input 
  name="ticker" 
  id="ticker" 
  list="stockSelection" 
  onChange={this.onChange} 
  value={this.state.ticker} 
  className="form-control text-center" 
/>
<datalist id="stockSelection">
  {this.state.country === "United States of America"
    ? USDATA.map(({ symbol, name }) => (
        <option key={symbol} value={symbol}>{`${symbol} - ${name}`}</option>
      ))
    : INDIADATA.map(({ symbol, name }) => (
        <option key={symbol} value={symbol}>{`${symbol} - ${name}`}</option>
      ))
  }
</datalist>

此时用户输入"Ab"时，下拉列表会匹配到包含"Ace"名称的选项，显示ABC - Ace to The Base Camp，选中后输入框自动填充ABC。

2. 处理手动输入名称的转换逻辑

如果用户手动输入了股票名称（比如直接输入"Ace"），需要自动将输入值转换为对应的股票代码，修改onChange函数即可：

onChange = (e) => {
  const inputValue = e.target.value.trim();
  const currentData = this.state.country === "United States of America" ? USDATA : INDIADATA;
  
  // 匹配股票代码或名称（不区分大小写）
  const matchedStock = currentData.find(stock => 
    stock.symbol.toLowerCase() === inputValue.toLowerCase() ||
    stock.name.toLowerCase().includes(inputValue.toLowerCase())
  );

  // 如果找到匹配项，设置输入值为代码；否则保留输入（或根据需求清空）
  this.setState({
    ticker: matchedStock ? matchedStock.symbol : inputValue
  });
};