在react中为datalist标记添加标记向下行为

Question

我使用数据表标记在我的React应用程序中的页面上显示每个定义的值。

我试图为这个datalist标记添加标记行为。这样我就可以在从下拉列表中选择输入时向用户提供建议。

例如，我们有“阿拉巴马州，阿拉斯加亚利桑那州”国家，如果用户在输入框中键入A，则必须在输入框中显示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，您可以使用好的反应-突出-词。

概念的证明例子：

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

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