[Web Portal] AutoComplete component

[sunqinzheng]

What's this?

The AutoComplete is an extension of a regular text-field that will auto-complete the input dynamically.

The difference between AutoComplete and ComboBox is that it is mainly focused on text input.

Props

• items
  • string[], required
  • Array of suggestions. Only suggestions prefixed by current text field value are displayed by default.
• value
  • string, required
  • TextField's value
• onChange
  • callback function, required
    • (newValue: string) => {}
  • TextField's onChange function
• showAllSuggestions
  • boolean, required
  • Whether to disable suggestions' default prefix filter.

Example

const app = () => {
  const [val, setVal] = useState('');
  return (
    <AutoComplete
      value={val}
      onChange={setVal}
      items={['pen', 'apple', 'applepen']}
    />
  );
}

[coveralls]

Coverage remained the same at 53.218% when pulling 2540302 on qinsu/portal/ac into 1064bf2 on master.

[coveralls]

Coverage remained the same at 53.218% when pulling 2540302 on qinsu/portal/ac into 1064bf2 on master.

[coveralls]

Coverage remained the same at 53.218% when pulling 2540302 on qinsu/portal/ac into 1064bf2 on master.

[coveralls]

Coverage remained the same at 53.218% when pulling 2540302 on qinsu/portal/ac into 1064bf2 on master.

[Binyang2014]

Can you give a simple example about how to use it?
And the auotComplete can support only autocomplete the last word? For example I have a sentence: "May the force be with you", and I input "May the fo", the suggestion should be "May the force".

[sunqinzheng]

The AutoComplete component behaves like a combo box. So you need to provide the whole sentence "May the force".
Since the value and suggestionItems are controlled by its parent, you can add your own suggestion logic.
e.g. add "May the force" option only when user has input "May the f"

[sunqinzheng]

If you want a multiline word/phrase level AutoComplete component, I recommend you use Monaco Editor.

[Binyang2014]

Got it, thanks for the explanation.