Breaking News: Grepper is joining You.com. Read the official announcement!

controlled autocomplete material ui

Himanshu Makwana answered on March 15, 2022 Popularity 8/10 Helpfulness 4/10

answer controlled autocomplete material ui

related material-ui autocomplete controlled

controlled autocomplete material ui

Comment

<Controller
  defaultValue={null}
  name={"name"}
  control={control}
  rules={{
    required: true, // for mandatory field
    validate: (data) => { // checking whether array is empty or not
    	if(data.length === 0) return false 
    }}
  }
  render={({value, name, onChange}) => (
  	<Autocomplete
      value={value}
      multiple
      name={name}
      size="small"
      id="status"
      options={options}
      disableCloseOnSelect
      onChange={(e, v) => {onChange(v);} }
      getOptionLabel={(option) => option.name}
      renderOption={(props, option, { selected }) => (
        <li {...props}>
          <Checkbox
          icon={icon}
          checkedIcon={checkedIcon}
          style={{ marginRight: 8 }}
          checked={selected}
        />
        	{option.name}
        </li>
      )}
      style={{ width: 250 }}
      renderInput={(params) => (
      	<TextField {...params} /* error={errors.name ? true : false} */ variant="outlined" label="Select" />
      )}
    />
  )}
/>

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: autocomplete javascript material-ui

Link to this answer
Share Copy Link

Contributed on Mar 15 2022

Himanshu Makwana

0 Answers Avg Quality 2/10

Closely Related Answers

material-ui autocomplete controlled

Comment

import React, { Component } from 'react';
import Autocomplete from  'react-autocomplete';
import { namelist, matchnames } from './info';
import './App.css';

class App extends Component {

  state = { value: '' };

  render() {
    return (
      <div style = {{ marginTop: 40, marginLeft: 50 }}>
        <Autocomplete
          value={ this.state.value }
          inputProps={{ id: 'states-autocomplete' }}
          wrapperStyle={{ position: 'relative', display: 'inline-block' }}
          items={ namelist() }
          getItemValue={ item => item.name }
          shouldItemRender={ matchnames }
          onChange={(event, value) => this.setState({ value }) }
          onSelect={ value => this.setState({ value }) }
          renderMenu={ children => (
            <div className = "menu">
              { children }
            </div>
          )}
          renderItem={ (item, isHighlighted) => (
            <div
              className={`item ${isHighlighted ? 'item-highlighted' : ''}`}
              key={ item.abbr } >
              { item.name }
            </div>
          )}
        />
      </div>
      );
    }
  }

export default App;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: phperrorcode.com

Tags: autocomplete javascript material-ui

Link to this answer
Share Copy Link

Contributed on Aug 18 2022

warner smith

0 Answers Avg Quality 2/10

controlled autocomplete material ui

Contents

More Related Answers

controlled autocomplete material ui

Closely Related Answers

material-ui autocomplete controlled

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.