选项添加到 MUI 自动完成中的选项底部

Question

我正在构建一个类别添加器，以前我只允许“添加类别芯片”显示 nooptions 渲染，但我意识到如果有一个类别“软件工程师”并且有人想添加“软件”你做不到。

最终，我想将添加芯片（与普通芯片不同）添加到所有选项的末尾，其中包含搜索词。我尝试将其添加到渲染选项中，但随后它出现在每个选项之后，我尝试将其添加到过滤器选项中，但我无法自定义该芯片。

对解决这个问题有什么建议吗？

我的代码：

<Autocomplete
                id="Categories"
                // set it to the left of the cell
                style={{ width: '100%', marginTop: '1rem' }}
                key={autocompleteKey}
                options={
                  user.categories.length > 0
                    ? user.categories.filter((c) => {
                      return !category.includes(c || c.charAt(0).toUpperCase() + c.slice(1));
                    })
                    : []
                }
                onChange={(event, value) => (handleAddCategoryToCompany(value))}
                onInputChange={(event, value) => setNewCategory(value)}
                popupIcon=""
                filterOptions={(options) => {
                  console.log(options);
                  const result = [...options];
                  if (search.length > 0) result.push(search);
                  return result;
                }}
                renderOption={(event, value: string) => (
                  <>
                    <Chip
                      variant="outlined"
                      sx={{
                        m: '2px',
                      }}
                      onClick={() => handleAddCategoryToCompany(value)}
                      key={Math.random()}
                      label={value.charAt(0).toUpperCase() + value.slice(1)}
                      onDelete={() => removeFromGlobal(value)}
                    />
                    {/* {search.length > 0
                      ? (
                        <Chip
                          variant="outlined"
                          onClick={handleAddCategory}
                          key={Math.random()}
                          sx={{
                            m: '2px',
                          }}
                          label={search}
                          icon={<AddCircleIcon />}
                        />
                      ) : null} */}
                  </>
                )}
                renderInput={(par) => (
                  // Textfield where the options have a delete icon
                  <TextField
                    {...par}
                    fullWidth
                    label="Add Tag(s)"
                    margin="normal"
                    size="small"
                    name="Name"
                    onChange={(event) => (setSearch(event.target.value))}
                    key={autocompleteKey}
                    type="company"
                    value={search}
                    variant="outlined"
                  />
                )}
                noOptionsText={search.length > 0
                  ? (
                    <Chip
                      variant="outlined"
                      onClick={handleAddCategory}
                      key={Math.random()}
                      sx={{
                        m: '2px',
                      }}
                      label={search}
                      icon={<AddCircleIcon />}
                    />
                  ) : null}
              />

Answer 1

我通过在过滤器选项中的搜索选项中添加一个修饰符来解决这个问题，然后在渲染中使用条件语句来查找此选项。似乎工作正常。

<Autocomplete
                id="Categories"
                // set it to the left of the cell
                style={{ width: '100%', marginTop: '1rem' }}
                key={autocompleteKey}
                options={
                  user.categories.length > 0
                    ? user.categories.filter((c) => {
                      return !category.includes(c || c.charAt(0).toUpperCase() + c.slice(1));
                    })
                    : []
                }
                onChange={(event, value) => (handleAddCategoryToCompany(value))}
                onInputChange={(event, value) => setNewCategory(value)}
                popupIcon=""
                filterOptions={(options) => {
                  console.log(options);
                  const result = [...options];
                  if (search.length > 0) result.push(`${search} (new)`);
                  return result;
                }}
                renderOption={(event, value: string) => (
                  <>
                    {value.indexOf(' (new)') > -1
                      ? (
                        <Chip
                          variant="outlined"
                          onClick={handleAddCategory}
                          key={Math.random()}
                          sx={{
                            m: '2px',
                          }}
                          label={search}
                          icon={<AddCircleIcon />}
                        />
                      )
                      : (
                        <Chip
                          variant="outlined"
                          sx={{
                            m: '2px',
                          }}
                          onClick={() => handleAddCategoryToCompany(value)}
                          key={Math.random()}
                          label={value.charAt(0).toUpperCase() + value.slice(1)}
                          onDelete={() => removeFromGlobal(value)}
                        />
                      )}
                  </>
                )}
                renderInput={(par) => (
                  // Textfield where the options have a delete icon
                  <TextField
                    {...par}
                    fullWidth
                    label="Add Tag(s)"
                    margin="normal"
                    size="small"
                    name="Name"
                    onChange={(event) => (setSearch(event.target.value))}
                    key={autocompleteKey}
                    type="company"
                    value={search}
                    variant="outlined"
                  />
                )}
                noOptionsText={search.length > 0
                  ? (
                    <Chip
                      variant="outlined"
                      onClick={handleAddCategory}
                      key={Math.random()}
                      sx={{
                        m: '2px',
                      }}
                      label={search}
                      icon={<AddCircleIcon />}
                    />
                  ) : null}
              />