Поиск по имени или идентификатору с автозаполнением пользовательского интерфейса материала

Я создаю модальное окно поиска с автозаполнением, и в конечном итоге я хочу добиться возможности поиска людей по их именам или идентификаторам. Но когда вы выбираете человека из предложения, и имя попадает в поле ввода, я не хочу, чтобы идентификатор отображался (причина в том, что настоящие идентификаторы будут очень длинными и будут выглядеть некрасиво). Вот скриншот для лучшего понимания проблемы введите здесь описание изображения

Я не хочу, чтобы эта цифра 6 появлялась, когда я выбираю вариант из предложений.

Вот мой код для автозаполнения

 <Autocomplete
        multiple
        id="tags-outlined"
        options={students}
        onInputChange={(event) => event.target}
        getOptionLabel={({ firstName, lastName, id }) =>
          `${firstName} ${lastName} ${id}`
        }
        filterSelectedOptions
        renderOption={({ firstName, lastName, id }) => {
          return (
            <div>
              <div>
                {`${firstName} `}
                {lastName}
              </div>
              <span>{id}</span>
            </div>
          );
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            className={classes.input}
            variant="outlined"
            label="Name or Student ID"
          />
        )}
      />

reactjs material-ui autocomplete
person Aleksandr Fomin    schedule 16.08.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать createFilterOptions для создания собственного фильтра и передать его как свойство filterOptions в Autocomplete.

В вашем случае вы должны предоставить конфигурацию stringify, эта конфигурация управляет преобразованием опции в строку, чтобы ее можно было сопоставить с фрагментом входного текста — документы.

...
import Autocomplete, { createFilterOptions } from "@material-ui/lab/Autocomplete";

const filterOptions = createFilterOptions({
  stringify: ({ firstName, lastName, id }) => `${firstName} ${lastName} ${id}`
});

function App() {
  return (
    <div>
      <Autocomplete
        multiple
        id="tags-outlined"
        options={students}
        onInputChange={(event) => event.target}
        filterOptions={filterOptions}
        getOptionLabel={({ firstName, lastName }) => {
          // this is how our option will be displayed when selected
          // remove the `id` here
          return `${firstName} ${lastName}`;
        }}
        filterSelectedOptions
        renderOption={({ firstName, lastName, id }) => {
          return (
            <div>
              <div>
                {`${firstName} `}
                {lastName}
              </div>
              <span>{id}</span>
            </div>
          );
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="outlined"
            label="Name or Student ID"
          />
        )}
      />
    </div>
  );
}

Редактировать эвристический-clarke-moz4d

person bertdida    schedule 16.08.2020