React Material UI自动完成功能突出显示结果中的搜索文本

Question

我正在使用ReactJS项目中的Material UI（v0.20.0）组件库中的Autocomplete组件。我试过找到这个功能的实现，但没有遇到一个很好的例子。我希望能够突出显示/格式化用户在搜索结果中输入的文本，类似于附加图像。

Answer 1

如果您使用的是Material-ui v0.xx，请查看以下示例。

要将样式应用于用户输入的文本，您必须使用inputStyle prop，如下所示。

此外，我已经提到浮动标签，下划线，提示文本等其他样式，可能有助于社区。

 const styles = {
    floatingSearchLabelStyle: {
      color: '#fff',
      fontFamily: 'Open Sans","Helvetica Neue",Helvetica,Arial,"Lucida Grande'
    },
    inputSearchStyleText: {
      color: '#fff'
    },
    underlineSearchStyle : {
      borderColor: '#fff'
    },
    hintSearchStyle: {
      color: '#fff'      
    }
}
<AutoComplete
      floatingLabelText="Search people"
      hintText="Search with name"
      dataSource = {dataSource}
      style={{marginTop: '-20px'}}
      maxSearchResults={10}
      anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}
      animated={true}
      onNewRequest= {this.handleNewRequest}
      onUpdateInput={this.handleUpdateInput}
      filter={AutoComplete.fuzzyFilter}        
      inputStyle={styles.inputSearchStyleText} 
      underlineStyle={styles.underlineSearchStyle} 
      underlineFocusStyle={styles.underlineSearchStyle} 
      hintStyle={styles.hintSearchStyle} 
      floatingLabelStyle={styles.floatingSearchLabelStyle}
    />

希望这个答案可以帮助您使用material-ui v0.xx.