在react

Question

我正在使用datalist标签在React应用程序的页面上显示按定义的值。

我正在尝试为此数据列表标签添加降价行为。这样我就可以在从下拉菜单中选择输入时向用户提供建议。

例如，我们有“阿拉巴马州，阿拉斯加亚利桑那州”国家/地区，如果用户在输入框中输入 A ，则必须先显示 A ，然后显示“ labama ”（以其他颜色/阴影表示，例如 A labama）。

为此，我指的是此链接http://afarkas.github.io/remote-list/demo/index.html

（请检查给定链接中的第一个示例。）

这是我的示例代码

<input type="text" placeholder="Find U.S. State" list="states-2" id="search-2" data-list='{"valueCompletion": true, "highlight": true}'> (long list example + mark-option behavior)
    <datalist id="states-2">
        <select>
            <option value="Alabama"></option>
            <option value="Alaska"></option>
            <option value="Arizona"></option>
            <option value="South Carolina"></option>
            <option value="Wisconsin"></option>
            <option value="Wyoming"></option>
        </select>
    </datalist>

我能够自动填充数据，但无法提供降价行为。

任何人都可以为我提供如何在React应用程序中实现给定方案的方法吗？或者是否有其他方法可以在不使用datalist标签的情况下实现此功能。

Answer 1

这不完全是降价行为：您想要获得突出显示效果。 借助React，您可以使用优质的react-highlight-words。

概念验证示例：

<option value="Alabama">
  <Highlighter
    highlightClassName="YourHighlightClass"
    searchWords={["A"]}
    autoEscape={true}
    textToHighlight="Alabama"/>
</option>

然后，您需要使用CSS才能获得加粗/突出显示效果。