ComboBox


import * as React from 'react';    
import { ComboBox, IComboBoxProps, IComboBoxStyles} from 'office-ui-fabric-react/lib/ComboBox';

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 'office-ui-fabric-react/lib/ComboBox';

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'
          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
      });
    }
  }
}


© 2019 Better Solutions Limited. All Rights Reserved. © 2019 Better Solutions Limited TopPrevNext