有没有办法在 datalist 元素中呈现可点击的选项标签？

如何解决有没有办法在 datalist 元素中呈现可点击的选项标签？

我在表单元素中有一个自动完成搜索字段，在输入标签下我有一个数据列表，我根据用户输入向其中呈现我的outocompleted选项-

 <form autoComplete="on">
            <div className="ui action input mini">
                <input type="text" list="autocomplete" className="searchInput"
                    onChange={event => setTerm(event.target.value)} value={term} />
                <button className="ui icon button" onClick={(e)=>submitChosenUser(e)}>
                <i className="search icon"></i></button>
            </div>
            {autocompleteSuggestions.length > 0 ?
                <datalist id="autocomplete">
                    {RenderAutocompleteUserList()}
                </datalist> : null}                    
        </form>

我的 RenderAutoCompleteUserList 函数看起来像这样-

    const RenderAutocompleteUserList = () => {
    return (
        autocompleteSuggestions.map((user) => {
            return <option key={user.id} id={`${user.id}`} value={`${user.firstName} ${user.lastName}`} path={`${user.path}`}></option>            
        })
    )
}

我想让每个选项标签都可以点击，这样我就可以重定向到所选的用户个人资料页面。 目前我需要选择用户并点击搜索按钮才能实现。

有没有办法让选项只能用 javascript 来点击？

谢谢！