在输入中显示突出显示的文本

Question

我正在尝试执行如下所示的操作，即我有一个带有建议下拉菜单的输入，该男性和女性中只有 2 个值 如果我输入 M，其余字母 ale 在输入中突出显示，通过单击它或按 Tab 键，它会自动填充 女性反之亦然 有图书馆吗？

我已经尝试过下面的代码，但由于明显的原因它没有显示任何突出显示的文本，并且每当使用类型 M 或 F 时都会自动填充，问题是由于下面的情况，它不允许我删除值

ps。我附上一张图片作为我想要的参考，它是 gmail 搜索中的一个功能

if (name === 'patient_gender') {
        if (input.toLowerCase().startsWith('m')) {
            input = 'Male';
        } else if (input.toLowerCase().startsWith('f')) {
            input = 'Female';
        }
    }

Answer 1

** 用于此目的的一个流行库是 React - autosuggest **

我们可以使用命令安装这个库：- “npm 安装 React-autosuggest 库”