如何在react-autocomplete中渲染无匹配结果提示文本

核心思路是先根据用户输入过滤建议列表，当过滤结果为空时，手动添加一个用于提示的特殊选项，再渲染到下拉框中，同时区分处理这个特殊选项的交互和样式。

具体实现步骤： #

• 过滤建议项：根据当前输入值过滤原始suggestions列表，得到匹配的结果。
• 处理无匹配场景：如果过滤后的结果为空，将一个自定义的提示项（如{id: 'no-result', text: 'No results found'}）加入到待渲染的列表中。
• 区分渲染项：在renderItem中判断当前项是否为提示项，为其设置特殊样式（比如灰色文字、不可点击光标）。
• 拦截无效选择：在onSelect中判断选中的是否为提示项，避免触发不必要的业务逻辑。

完整代码示例： #

import { useState } from 'react';
import Autocomplete from 'react-autocomplete';

const YourComponent = () => {
  const [value, setValue] = useState('');
  const suggestions = [{id: 100 , text:  "Aluminium extracts" }, {id: 101 , text:  "Copper extracts" }];

  // 过滤匹配的建议项
  const filteredItems = suggestions.filter(item => 
    item.text.toLowerCase().includes(value.toLowerCase())
  );

  // 生成最终渲染的列表：无匹配时添加提示项
  const displayItems = filteredItems.length > 0 
    ? filteredItems 
    : [{ id: 'no-result', text: 'No results found' }];

  const handleInput = (selectedValue) => {
    // 这里是你的选中处理逻辑
    console.log('Selected:', selectedValue);
  };

  return (
    <Autocomplete
      getItemValue={(item) => item.text}
      items={displayItems}
      renderItem={(item, isHighlighted) => {
        if (item.id === 'no-result') {
          // 渲染无结果提示，设置不可点击样式
          return (
            <div style={{ color: '#999', padding: '8px', cursor: 'default' }}>
              {item.text}
            </div>
          );
        }
        // 渲染正常建议项，高亮时添加背景色
        return (
          <div 
            style={{ 
              backgroundColor: isHighlighted ? '#f0f0f0' : 'transparent', 
              padding: '8px',
              cursor: 'pointer'
            }}
          >
            {item.text}
          </div>
        );
      }}
      value={value}
      onChange={(e, newValue) => setValue(e.target.value)}
      onSelect={(selectedText) => {
        // 点击无结果提示时不执行处理逻辑
        if (selectedText !== 'No results found') {
          handleInput(selectedText);
        }
      }}
      inputProps={{ placeholder: "start typing"}}
    />
  );
};

export default YourComponent;

说明： #

• 移除了原有的shouldItemRender，因为我们已经提前完成了过滤逻辑，这样更直观可控。如果需要保留shouldItemRender，需要额外判断提示项并返回true。
• 提示项设置了cursor: default，避免用户误以为可以点击，同时在onSelect中拦截了对提示项的选择操作。

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