Material-UI在自动完成组件中添加搜索图标

Question

我正在使用@material-ui自动完成组件进行搜索，并希望在自动完成组件旁边添加搜索图标。

我尝试了类似以下的代码，但在更改----选项字段后无法显示字段。

import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
.
.
.
<Autocomplete
      id="combo-box-demo"
      options={this.state.results} // .map((option) => option.title_display)
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      onInputChange={this.handleInputChange}
      renderInput={(params) => (
        <TextField
          {...params}
          variant="outlined"
          InputProps={{
            endAdornment: (
              <InputAdornment>
                <IconButton>
                  <SearchIcon />
                </IconButton>
              </InputAdornment>
            )
          }}
        />
      )}
    />

如果我只是添加搜索图标，它会被添加到自动完成组件的下方。

<Fragment>
  <Autocomplete
    id="combo-box-demo"
    options={top100Films}
    getOptionLabel={(option) => option.title}
    style={{ width: 300 }}
    renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
  />
  <SearchIcon />
</Fragment>

https://codesandbox.io/s/material-demo-forked-qt99q?file=/demo.js

- Napdx

Answer 1

[这是输出结果][1] [1]: https://istack.dev59.com/JBSvO.webp

import React, { useState, useEffect } from 'react';
import { TextField} from '@material-ui/core'
import InputAdornment from '@material-ui/core/InputAdornment';
import Autocomplete from '@material-ui/lab/Autocomplete';
import SearchIcon from '@material-ui/icons/Search';
import { makeStyles, Theme } from "@material-ui/core/styles";

export default function AddBusiness() {    

    const useStyles = makeStyles((theme: Theme) => ({
     margin: {
        padding: "10px 5px 5px 5px",
        borderRadius: 4,
        backgroundColor: theme.palette.common.white,
        margin: theme.spacing(0),
        border: "1px solid rgb(157, 157, 157)",
        width: "100%",
      },
    }));

    const classes = useStyles();

    const [cityData, setCityData] = React.useState([]);

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/todos')
        .then(data => data.json())
        .then(res => setCityData(res))
        .catch(error => console.log(error))
    }, [])

 return (  
    <Autocomplete
        id="combo-box-demo" 
        options={cityData} 
        getOptionLabel={(option: any) => option.title} 
        className={classes.margin} 
        style={{ paddingBottom: '8px' }} 
        renderInput={(params) => <TextField {...params} label="" 
        placeholder="Search City" 
            InputProps={{ ...params.InputProps, 
            startAdornment: ( <InputAdornment position="start"> <SearchIcon /> 
            </InputAdornment> ),
            disableUnderline: true }} />} 
    />
 )}

- Kundan Dewangan

---

请解释您的解决方案。仅包含代码而没有解释的答案将被标记为低质量。 - cursorrux

这是MUI的正确答案。不要乱搞样式。使用给定的插槽。 - AshTyson

InputProps={{ ...params.InputProps, .. 正是我所需要的。 - iulial

Answer 2

你可以使用 display: "flex" 对父元素进行设置，使其子元素在同一行中对齐。还可以将 search icon 居中对齐到该元素中心。

<SearchIcon style={{ cursor: "pointer", padding: "17px" }} />

希望您期待相同的用例。如果您遇到任何问题，请告诉我。

示例演示：https://codesandbox.io/s/material-demo-forked-v17jz?file=/demo.js

- Sarun UK

---

谢谢，我一整天都在苦苦挣扎，非常感谢你的帮助。 - Napdx

Answer 3

我写这篇文章是为了帮助有需要的人，因为我已经解决了这个问题。在我的情况下，我通过将图标添加到文本字段中来解决了它。

<Autocomplete 
  options={arrayList}
  renderInput={(params) => 
    <TextField 
       {...params}
       InputProps={{
         ...params.InputProps,
          endAdornment: (
            <Icon icon='material-symbols:search' />
          )
       }}
    />
  } />

正如某人所评论的那样，如果您将其与自动完成的“forcePopupIcon”属性一起添加，则会覆盖打开列表的图标。

“endAdornment”属性表示必须将其添加到输入的末尾，您可以以同样的方式使用“startAdornment”将其添加到左侧。

- BetaStranger12

Answer 4

这是自定义弹出图标的方式

<Autocomplete
            className={classes.root}
            id="combo-box-demo"
            options={boards}
            getOptionLabel={(option) => option}
            forcePopupIcon={true}
            popupIcon={<SearchIcon />}
            renderInput={(params) => (
                <>
                    <TextField
                        placeholder="search"
                        {...params}
                        label="Combo box"
                        variant="filled"
                    />
                </>
            )}
        />

- morteza

---

这不是正确的解决方案，因为当自动完成获得焦点时，搜索图标会旋转。 - AshTyson