用户键入后，文本框中每种单词类型的下拉菜单自动完成"#"

Question

我不知道这是否太复杂了。

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

getWords("")

返回["沙发"，"椅子"，"行星"，"哥伦比亚"，"世纪"]

getWords("c") 

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

getWords["co"]

仅返回 [哥伦比亚]

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

例如

我想去 C

什么都不做

我想去 #

出现整个下拉菜单

我想去 #c

下拉菜单缩小到仅"汽车"哥伦比亚"世纪">

等等。

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

到目前为止，我拥有的：

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

在JavaScript中

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

Answer 1

如果你正在使用 react：

constructor(){
super()
this.state = {
show_suggestion:false,
suggestions:[]
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(el,{value}){
if(value){
if(value.chartAt(0)=="#"){
//call your helper function to get list of suggestions
this.setState({
show_suggestion : true,
suggestions : helper_list,
value : value
})
}else{
this.setState({
show_suggestion : false,
suggestions : [],
value : value
})
}
}
}
selectionCallback(value){
this.setState({
show_suggestion:false,
suggestions : [],
value : value
})
}
render(){
return(
<input onChange={this.handleChange} value={this.state.value}/>
{this.state.show_suggestion&&<CustomDropDown 
list={this.state.suggestions}
selectionCallback={this.selectionCallback}
/>}
)
}

自定义下拉列表：

export default const Cop = (props) => {
return(
{props.list.map((item, index)=>{
return <span key={index} onClick={()=>props.selectionCallback(item)}>{item}</span>
})
)
}

希望它是你需要的