title: Material UI - How can I do a search bar with autocomplete (fetching from Firebase)
body: <p>I'm new in full stack developing and I'm trying to add to my client (React Js with MUI and Redux) a search bar that search a document name (or a value in a document) in a cloud firestore collection. I do not know how to do it, any suggestion? I'll show you my Navbar code (where I would add a search bar).</p>
  <p>Navbar.js</p>
  <pre><code>import React, { Component, Fragment } from 'react';
  import {Link} from 'react-router-dom';
  import {connect} from 'react-redux';
  import PropTypes from 'prop-types';
  import MyButton from '../../utils/MyButton'
  import NewPost from '../post/NewPost'
  import withStyles from '@material-ui/core/styles/withStyles';
  //MUI
  import TextField from '@material-ui/core/TextField';
  import Select from '@material-ui/core/Select';
  import Input from '@material-ui/core/Input';
  import InputLabel from '@material-ui/core/InputLabel';
  import MenuItem from '@material-ui/core/MenuItem';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import Button from '@material-ui/core/Button';
  import Drawer from '@material-ui/core/Drawer'
  import IconButton from '@material-ui/core/IconButton';
  //icons
  import HomeIcon from '@material-ui/icons/Home'
  import ChatIcon from '@material-ui/icons/Chat';
  import Menu from '@material-ui/icons/Menu'
  import Notifications from './Notifications'
  import { List, ListItem, ListItemText,ListItemIcon, TextField } from '@material-ui/core';
  
  
  const styles = {
      draw: {
          backgroundColor: &quot;primary&quot;
      }
  }
  
   class Navbar extends Component {
      constructor(props) {
          super(props);
          this.state = {
            open: false,
            game:'ygo',
            query:'',
          };
      }
      gameChange = (event) =&gt; {
          this.setState({game: event.target.value});
      };
  
      searchChange = (event) =&gt;{
          this.setState({query: event.target.value})
      }
  
      render() {
          var { authenticated, classes} = this.props;
          //const [open, setOpen] = useState(false);
          const handleDrawer = () =&gt;{
              this.setState({ open: true })
          }
          const { open } = this.state;
          const ITEM_HEIGHT = 48;
          const ITEM_PADDING_TOP = 8;
          const MenuProps = {
              PaperProps: {
                style: {
                  maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
                  width: 250,
                },
              },
          };
          if(authenticated===true){
              var { authenticated, classes,user:{credentials:{ygo,mtg,kf}}} = this.props;
          }
  
  
          return (
              
              &lt;AppBar position=&quot;fixed&quot;&gt;
                  &lt;Toolbar className=&quot;nav-container&quot;&gt;
                      {authenticated ? (
                          &lt;Fragment&gt;
                              &lt;IconButton edge=&quot;start&quot; onClick={handleDrawer} &gt;
                                  &lt;Menu/&gt;
                              &lt;/IconButton&gt;
                              &lt;Notifications /&gt;
                              &lt;TextField
                                  name=&quot;search&quot;
                                  floatingLabelText=&quot;Cerca&quot;
                                  value={this.state.query}
                                  onChange={this.searchChange}
                                  floatingLabelFixed
                              /&gt;
  
                          &lt;/Fragment&gt;
                          
  
                      ):(
                          &lt;Fragment&gt;
                              &lt;Button color=&quot;inherit&quot; component={Link} to=&quot;/login&quot;&gt;Login&lt;/Button&gt;
                              &lt;Button color=&quot;inherit&quot; component={Link} to=&quot;/signup&quot;&gt;Singup&lt;/Button&gt;
                              &lt;Button color=&quot;inherit&quot; component={Link} to=&quot;/&quot;&gt;Home&lt;/Button&gt;
                          &lt;/Fragment&gt;
                      )}
                  &lt;/Toolbar&gt;
              &lt;/AppBar&gt;
  
              
          )
      }
  }
  
  Navbar.propTypes = {
      authenticated:  PropTypes.bool.isRequired,
      user: PropTypes.object.isRequired,
      classes: PropTypes.object.isRequired
  }
  
  const mapStateToProps = state =&gt;({
      authenticated: state.user.authenticated,
      user: state.user,
      game: state.UI
  })
  
  export default connect(mapStateToProps)(withStyles(styles)(Navbar))
  
  </code></pre>