material-ui adding search icon in autocomplete component

user_14681542 0
Viewed 5965

I am using @material-ui autocomplete for search and I want to add search icon next to autocomplete component

I tried something like this but after changing ---- option fields is not displaying

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>
            )
          }}
        />
      )}
    />

ANd if I just add searchicon it get added below the autocomplete component

<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

material-ui reactjs
3 Answers

[this is output][1] [1]: https://i.stack.imgur.com/JBSvO.png

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 }} />} 
    />
 )}
user_125093030

You can use display: "flex" for the parent to align its child in the same line. And also align search icon at the center of the element,

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

enter image description here

Hope you are expecting the same use case. Let me know if you are facing any issue.

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

user_33836930

This is the way you can customize the popup Icon

<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"
                    />
                </>
            )}
        />
user_109382200
Related