Блог

Главная - Вопросы по программированию - API автозаполнения MUI: когда я вставляю текст,разделенный пробелами, при событии ввода для него создается один тег. Можно ли создать несколько тегов для события «ввод»?

API автозаполнения MUI: когда я вставляю текст,разделенный пробелами, при событии ввода для него создается один тег. Можно ли создать несколько тегов для события «ввод»?

#reactjs #autocomplete #material-ui #jsx

Вопрос:

Я использую управление автозаполнением MUI в своем приложении reactjs. Прямо сейчас , если я вставлю пользовательский (недоступный в списке опций) контент, разделенный пробелами, например, 3N1CE2CPXEL289419 3N1BC1AP8AL399166, при нажатии кнопки ввода для него создается один тег : Изображение API автозаполнения

Итак, у меня есть сценарий, в котором пользователь вставляет текст, разделенный пробелами. Возможно ли, что для каждого значения, разделенного пробелами, создается один тег, т. е. один для 3N1CE2CPXEL289419 и один для 3N1BC1AP8AL399166 при нажатии кнопки ввода?

Комментарии:

1. Пожалуйста, проясните вашу конкретную проблему или предоставьте дополнительные сведения, чтобы точно указать, что вам нужно. Поскольку это написано в настоящее время, трудно точно сказать, о чем вы просите.

Ответ №1:

ниже показано, как мы достигаем abv —

                    <Autocomplete
                    multiple
                    limitTags={2}
                    id="tags-filled"
                    onChange={onChange}
                    size="small"                   
                    onInputChange={onInputChange}
                    options={rowData.map((option) => option.vinno)}
                    value={autoCompleteValue}
                    freeSolo
                    loading
                    //defaultValue={[top100Films[13].title]}                    
                    //onSelect={(event) => onSelect(event, 'tags')}
                    /* either render tags will work or renderoption */
                    renderTags={(value, getTagProps) =>
                        value.map((option, index) => (
                            <Chip variant="outlined" onDelete={onDelete} label={option} {...getTagProps({ index })} />
                            // <Chip variant="outlined" onDelete={onDelete} label={option} {...getTagProps({ index })} onDelete={onDelete} />
                        ))
                    }
                    renderInput={(params) => (
                        <TextField
                            {...params}                            
                            variant="outlined"
                            label="VinNOs"
                            placeholder="Favorites"
                            onKeyDown={e => {
                                if (e.key === "Enter" amp;amp; e.target.value) {
                                    let text = e.target.value;
                                    if (text.includes(" ")) {
                                        let vinnos = text.split(" ");
                                        setAutoCompleteValue(autoCompleteValue.concat(vinnos));

                                    } else {
                                        setAutoCompleteValue(autoCompleteValue.concat(e.target.value));
                                    }
                                }
                            }}
                        />
                    )}
Метки: , ,