Autocomplete Select Component

[sanhofman]

Problem description

An autocomplete select component which enables autocomplete search on a given list of results.

Proposed solution

Possible solution:

import React from "react";
import { observer } from "mobx-react";
import { action, observable } from "mobx";
import SingleAutoComplete from "sulu-admin-bundle/components/SingleAutoComplete";

// 2 params are required:
// list: array with possible results, each item must have an ID
// list_key: defines which key you want to display and search on

@observer
class InputAutoComplete extends React.Component {
  @observable suggestions = [];
  @observable selectedLanguage = {};

  @action handleChange = (value) => {
    this.selectedLanguage = value;
    this.suggestions = [];
    this.props.onChange(value?.id ?? undefined);
  };

  @action handleSearch = (value) => {
    if (value) {
      this.suggestions = this.props.schemaOptions.list.value.filter((item) =>
        item[this.props.schemaOptions.list_key.value]
          .toLowerCase()
          .includes(value.toLowerCase())
      );
    }
  };

  render() {
    return (
      <SingleAutoComplete
        displayProperty={this.props.schemaOptions.list_key.value}
        onChange={this.handleChange}
        onSearch={this.handleSearch}
        searchProperties={[this.props.schemaOptions.list_key.value]}
        suggestions={this.suggestions}
        value={this.value}
      />
    );
  }
}
export default InputAutoComplete;

        <property name="languageCode" type="input_autocomplete" mandatory="true" colspan="12">
            <meta>
                <title>Language</title>
            </meta>
            <params>
                <param name="list" type="expression" value="service('App\\Service\\Admin\\AdminLanguageService').getLanguages()"/>
                <param name="list_key" value="title"/>
            </params>
        </property>

Contribution

This could be interesting to include as Sulu component?

[alexander-schranz]

@sanhofman Thank you for sharing your component here with us. This sounds like a great suggestion. I think it would be great if maybe we could improve our selects maybe always with some kind of filter / autocomplete handling. But think we need to check this first with our UI/UX consultants.

[nicolas-joubert]

Hello @sanhofman,
i've got the same need, so have you finally implemented it ?
Regards,

[sanhofman]

Hi @nicolas-joubert,

Yes we have used a custom component like mentioned above.

But would still be a great addition to provide this within Sulu!

[nicolas-joubert]

hi @sanhofman,
i've implemented your react component with a fake contentType. Rendering works but not save into model. Could you had Symfony part of the custom component, thanks ?

[nicolas-joubert]

After using 'id' for keys and change render value to {this.props.schemaOptions.list.value.find(({id}) => id === this.props.value)} it work on sulu 2.4