如何实现react-autosuggest在input-focus时加载建议列表

核心实现逻辑 #

• 调整shouldRenderSuggestions配置：默认组件仅在输入框有值时展示建议，需要修改为输入框聚焦且值为空时也允许渲染
• 绑定输入框onFocus事件：触发时直接将全量备选数据赋值给建议列表
• 保留输入变更时的过滤逻辑：用户输入内容时，基于全量数据做匹配过滤，更新建议列表

完整实现代码 #

import React, { useState } from 'react';
import Autosuggest from 'react-autosuggest';
// 引入组件默认样式
import 'react-autosuggest/dist/styles.css';

// 示例全量备选数据，可替换为你的接口返回数据
const allOptions = [
  { label: '北京' },
  { label: '上海' },
  { label: '广州' },
  { label: '深圳' },
  { label: '杭州' },
  { label: '成都' }
];

// 输入过滤匹配逻辑，可根据需求调整匹配规则
const getSuggestions = (value) => {
  const inputValue = value.trim().toLowerCase();
  const inputLength = inputValue.length;

  return inputLength === 0 ? [] : allOptions.filter(option =>
    option.label.toLowerCase().includes(inputValue)
  );
};

// 单条建议的渲染逻辑
const renderSuggestion = (suggestion) => (
  <div>{suggestion.label}</div>
);

// 获取建议对应的输入框值
const getSuggestionValue = (suggestion) => suggestion.label;

const AutoSuggestDemo = () => {
  const [inputValue, setInputValue] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  // 输入值变更时的回调
  const onSuggestionsFetchRequested = ({ value }) => {
    setSuggestions(getSuggestions(value));
  };

  // 关闭建议列表时清空
  const onSuggestionsClearRequested = () => {
    setSuggestions([]);
  };

  // 输入框聚焦事件：直接加载全量建议
  const handleInputFocus = () => {
    setSuggestions(allOptions);
  };

  // 输入框属性配置
  const inputProps = {
    placeholder: '请输入城市名称',
    value: inputValue,
    onChange: (_, { newValue }) => setInputValue(newValue),
    onFocus: handleInputFocus // 绑定聚焦事件
  };

  // 核心配置：空值时也允许渲染建议（适配聚焦展示全量的需求）
  const shouldRenderSuggestions = (value) => {
    return true;
  };

  return (
    <Autosuggest
      suggestions={suggestions}
      onSuggestionsFetchRequested={onSuggestionsFetchRequested}
      onSuggestionsClearRequested={onSuggestionsClearRequested}
      getSuggestionValue={getSuggestionValue}
      renderSuggestion={renderSuggestion}
      inputProps={inputProps}
      shouldRenderSuggestions={shouldRenderSuggestions}
    />
  );
};

export default AutoSuggestDemo;

注意事项 #

• 如果你的全量数据需要从接口获取，可以把allOptions改为状态，在handleInputFocus中发起接口请求获取全量数据后再赋值给suggestions即可，注意添加防抖避免重复请求
• 匹配规则可自行修改getSuggestions方法实现，支持拼音匹配、首字母匹配、全字匹配等自定义规则

内容的提问来源于stack exchange，提问作者Dev Asit