material ui autoComplete with icons material ui autoComplete with icons reactjs reactjs

material ui autoComplete with icons


I want to share maybe a new spin off of this solution that is based of the autocomplete example in the documentation (autocomplete demos). Keeps the image in the selected tag as well.

<Autocomplete    multiple    limitTags={2}    id="multiple-limit-tags"    options={top100Films}    getOptionLabel={(option) => option.title}    defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}    renderTags={options =>     {        return (            options.map(option =>                <Fragment>                    <IconButton color="primary">                        <img src={'../src/img/Tables.svg'}/> {/*Mock image, attribute in option*/}                    </IconButton>                        {option.title}                </Fragment>))    }}    renderOption={option => {        return (            <Fragment>                    <IconButton color="primary">                        <img src={'../src/img/Tables.svg'}/> {/*Mock image, attribute in option*/}                    </IconButton>                {option.title}            </Fragment>        );    }}    renderInput={(params) => (        <TextField             {...params}            variant="outlined"             label="limitTags"             placeholder="Favorites"         />    )}  />

enter image description here