React实现仅匹配开头字母的datalist自动补全功能

方向一：手动过滤选项（基于现有datalist改造） #

利用React状态管理，实时根据输入值过滤出以输入内容开头的选项，动态渲染datalist的<option>。结合你使用的Formik，代码可按以下方式修改：

import { Field, useFormikContext } from 'formik';

// 原始选项数组
const OPTIONS = ["Arc", "House", "Handle", "Chair", "Door"];

function WordField({ errors, touched }) {
  const { values, setFieldValue } = useFormikContext();
  // 过滤选项：仅保留以输入值开头的结果（不区分大小写）
  const filteredOptions = OPTIONS.filter(option => 
    option.toLowerCase().startsWith(values.word?.toLowerCase() || '')
  );

  return (
    <div className="form-field word-field">
      <label>Word</label>
      <Field 
        id="word" 
        name="word" 
        onChange={(e) => setFieldValue('word', e.target.value)}
      />
      {errors.word && touched.word && <div className="validation-error">{errors.word}</div>}
      <datalist id="word_list">
        {filteredOptions.map(option => (
          <option key={option} value={option} />
        ))}
      </datalist>
    </div>
  );
}

原理：每次输入内容变化时，用startsWith方法过滤原始选项，仅保留符合开头匹配的结果，动态更新datalist内容，浏览器的自动提示就只会显示过滤后的选项。

方向二：使用第三方UI库（更省心） #

如果不想手动编写过滤逻辑，推荐用成熟的React自动补全组件，比如react-select，它原生支持自定义匹配规则：

1. 先安装依赖：

npm install react-select

2. 结合Formik的使用示例：

import Select from 'react-select';
import { useFormikContext } from 'formik';

const OPTIONS = [
  { value: "Arc", label: "Arc" },
  { value: "House", label: "House" },
  { value: "Handle", label: "Handle" },
  { value: "Chair", label: "Chair" },
  { value: "Door", label: "Door" },
];

function WordField({ errors, touched }) {
  const { values, setFieldValue } = useFormikContext();

  // 自定义开头匹配的过滤函数
  const filterOptions = (options, inputValue) => {
    const lowerInput = inputValue.toLowerCase();
    return options.filter(option => 
      option.label.toLowerCase().startsWith(lowerInput)
    );
  };

  return (
    <div className="form-field word-field">
      <label>Word</label>
      <Select
        value={OPTIONS.find(opt => opt.value === values.word)}
        onChange={(selected) => setFieldValue('word', selected?.value || '')}
        options={OPTIONS}
        filterOption={filterOptions}
        placeholder="Type a word..."
      />
      {errors.word && touched.word && <div className="validation-error">{errors.word}</div>}
    </div>
  );
}

这个方案无需手动处理datalist兼容性，组件自带样式和交互（比如点击选中、键盘导航），适合新手快速落地需求。

方向三：模拟jQuery思路的事件监听 #

如果你想沿用找到的jQuery方案逻辑，可在React中通过ref获取输入框元素，监听输入事件动态修改datalist选项：

import { Field, useFormikContext, useRef, useEffect } from 'formik';

const OPTIONS = ["Arc", "House", "Handle", "Chair", "Door"];

function WordField({ errors, touched }) {
  const { values, setFieldValue } = useFormikContext();
  const datalistRef = useRef(null);

  useEffect(() => {
    const inputValue = values.word?.toLowerCase() || '';
    if (!datalistRef.current) return;

    // 清空现有选项
    datalistRef.current.innerHTML = '';
    // 添加过滤后的选项
    OPTIONS.forEach(option => {
      if (option.toLowerCase().startsWith(inputValue)) {
        const optionEl = document.createElement('option');
        optionEl.value = option;
        datalistRef.current.appendChild(optionEl);
      }
    });
  }, [values.word]);

  return (
    <div className="form-field word-field">
      <label>Word</label>
      <Field 
        id="word" 
        name="word" 
        list="word_list"
        onChange={(e) => setFieldValue('word', e.target.value)}
      />
      {errors.word && touched.word && <div className="validation-error">{errors.word}</div>}
      <datalist id="word_list" ref={datalistRef}></datalist>
    </div>
  );
}

该思路和jQuery方案逻辑一致，改用React钩子实现，通过useEffect监听输入值变化，动态更新datalist的DOM内容。

内容的提问来源于stack exchange，提问作者Cecilia Mesquita Pacheco