ComboBox

link - developer.microsoft.com/en-us/fluentui#/controls/web/combobox
This control combines a text field and a drop-down allowing the user to select an option from a list or enter their own choice.

import * as React from 'react';    
import { ComboBox,  IComboBoxProps, IComboBoxStyles} from '@fluentui/react';  

interface IProps_ComboBoxExample { 
} 
interface IState_ComboBoxExample { 
} 

export class ComboBoxExample extends React.Component<IProps_ComboBoxExample , IState_ComboBoxExample> { 
  constructor(props: IProps_ComboBoxExample) { 
    super(props); 
 
  } 

  render() { 

    return ( 
      <div> 

<ComboBox 
   label="Favourite Fruit:" 
   useComboBoxAsMenuWidth={ true } 

   options={ 
   [ 
      { key: 'fruitsHeader', text: 'Fruits'  }, 
      { key: 'apple',        text: 'Apple'   }, 
      { key: 'banana',       text: 'Banana'  }, 
      { key: 'carrot',       text: 'Carrot'  }, 
      { key: 'lettuce',      text: 'Lettuce' } 
   ] 
} 
/> 

      </div> 
    ); 
  } 

} 

import * as React from 'react';  
import {  ComboBox,  IComboBoxOption} from '@fluentui/react';  

import { SelectableOptionMenuItemType } from 'office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.Props';  

export class ComboBoxBasicExample extends React.Component<any, any> { 

  constructor() { 
    super(); 
  } 

  render() { 

    return ( 
      <div className='ms-ComboBoxBasicExample'>  

        <ComboBox 
          defaultSelectedKey='B'  
          placeholder="Select or type an option" 
          label='label text' 
          id='Basicdrop1'  
          ariaLabel='Basic ComboBox example' 
          allowFreeform={ true } 
          autoComplete='on'  
          options={ 
            [ 
              { key: 'A', text: 'Option a' },  
              { key: 'B', text: 'Option b' },  
              { key: 'C', text: 'Option c' },  
            ] 
          } 
        /> 

        <ComboBox 
          defaultSelectedKey='C'  
          label='label text' 
          id='Basicdrop2'  
          ariaLabel='Basic ComboBox example' 
          allowFreeform={ true } 
          autoComplete='on'  
          onResolveOptions={ this._getOptions } 
        /> 

      </div> 

    ); 
  } 

  _getOptions(currentOptions: IComboBoxOption[]): IComboBoxOption[] { 

    if (this.state.options.length > 0) { 
      return this.state.options; 
    } 

    let newOptions = 
      [ 
        { key: 'H', text: 'Option h' },  
        { key: 'I', text: 'Option i' },  
        { key: 'J', text: 'Option j' }  
      ]; 
    this.setState({ 
      options: newOptions, 
      selectedOptionKey: 'C1',  
      value: null 
    }); 

    return newOptions; 
  } 

  _onChanged(option: IComboBoxOption, index: number, value: string) { 
    if (option !== null) { 
      this.setState({ 
        selectedOptionKey: option.key, 
        value: null 
      }); 
    } else if (index !== null && index >= 0 && index < this.state.options.length) { 
      this.setState({ 
        selectedOptionKey: this.state.options[index].key, 
        value: null 
      }); 
    } else if (value !== null) { 
      let newOption: IComboBoxOption = { key: value, text: value }; 

      this.setState({ 
        options: [...this.state.options, newOption], 
        selectedOptionKey: newOption.key, 
        value: null 
      }); 
    } 
  } 
}