Javascript 文本框中每个单词类型的下拉式自动完成菜单，一旦用户键入#&引用；

我不知道这是否太复杂了

在HTML中，我有一个文本框（），在Javascript中，我有一个名为getWords（prefix）的工作方法，它返回一个与该前缀匹配的单词数组，例如

getWords("")

返回[“沙发”、“椅子”、“行星”、“哥伦比亚”、“世纪”]

返回[“汽车”、“哥伦比亚”、“世纪”]，而

 getWords["co"]

只返回[哥伦比亚]

我有一个文本框，我希望能够在用户键入时根据他们在“#”后键入的内容显示下拉列表

比如说

我想去C

什么都不做

我想去#

整个下拉菜单出现

我想去c

下拉菜单仅限于“汽车”“哥伦比亚”“世纪”

等等

我知道我的getWords方法很有帮助，但是我如何做下拉菜单部分呢

到目前为止，我所拥有的：

<input id="textField1"  type="text" onkeypress="function1(event)">
  <br>

---

如果您正在使用react：

constructor（）{
超级（）
此.state={
显示建议：错误，
建议：[]
}
this.handleChange=this.handleChange.bind（this）
}
handleChange（el，{value}）{
如果（值）{
如果（值.chartAt（0）=“#”）{
//调用助手函数以获取建议列表
这是我的国家({
建议：正确，
建议：帮助者列表，
价值：价值
})
}否则{
这是我的国家({
显示建议：错误，
建议：[]，
价值：价值
})
}
}
}
selectionCallback（值）{
这是我的国家({
显示建议：错误，
建议：[]，
价值：价值
})
}
render（）{
返回(
{this.state.show_suggestion&}
)
}

自定义下拉列表：

export default const Cop=（道具）=>{
返回(
{props.list.map（（项目，索引）=>{
返回props.selectionCallback（item）}>{item}
})
)
}

---

希望这是您所需要的

您是否使用了React组件？并非如此。我试图使用react，但我不是react组件

<input id="textField1"  type="text" onkeypress="function1(event)">
  <br>

function function1(e) {
    var keyPressed = e.key;
    if (keyPressed == "#") {
       bring drop down menu somehow
}