javascript - react - Material -ui : Autocomplete on words that aren't the first in a sentence

Question

我正尝试在我的网络应用程序的主题标签上实现自动完成，所以键入#h 会弹出一个带有#hello、#hope 等的菜单。因为我在其他任何地方都使用 material-ui，如果我能使用自动完成组件，但它仅适用于在自动完成框中键入的第一个单词。换句话说，它可以自动补全“#Hello what a great day”，但如果我键入多个单词，自动补全将被禁用，因此“It sure is a great day #Hello”不会自动补全#Hello。他们的例子也不能做到这一点。有没有人有任何指示？

Answer 1

以下是使用 material-ui 组件的方法:

<div style={{position:'relative'}}>

      <AutoComplete
        hintText="Type anything"
        dataSource={['#hello','#how','#are','#you']}
        ref={ref=>this.autocompleteRef=ref}
        searchText={this.state.searchText}
        onNewRequest={this.onNewRequest}
        textFieldStyle={{visibility:'hidden'}}
        style={{position:'absolute',top:'0',left:'0'}}
      />
      <TextField
        value={this.state.fullText || ''}
        hintText="fullText"
        onChange={this.myTextChange}
        type="text"
      />
    </div>

函数应该类似于:

myTextChange=(event)=>{
  let fullText = event.target.value,searchText;
  let hashTaggingIndex = this.hashTaggingIndex;
  if(hashTaggingIndex && hashTaggingIndex>-1){
    if(fullText[fullText.length-1]===' ') this.hashTaggingIndex = -1;
    else {
      searchText = fullText.substring(hashTaggingIndex+1,fullText.length);
    }
  } else if(fullText[fullText.length-1]==='#') { 
     this.hashTaggingIndex=fullText.length-1;
  }
  this.setState({fullText,searchText});
  if(this.autocompleteRef && hashTaggingIndex && hashTaggingIndex>-1){
    this.autocompleteRef.handleChange(event);
   }
};

onNewRequest=(value)=>{
  let fullText=this.state.fullText;
  fullText = fullText.substring(0,this.hashTaggingIndex) + value;
  this.setState({fullText})
};

玩得开心:)