Creating Multiple Result Lists in MUI Autocomplete Based on Option Properties: A Step-by-Step Guide

I have a query about displaying results using the MUI Autocomplete component. I am looking to categorize the results into two separate lists placed side by side.

Currently, I have a working searchbar with one list of results. However, I aim to segregate the results based on a specific property of each option, which will serve as their type identifier.

Below is the code I have so far:

<Autocomplete
        freeSolo={true}
        id="equipment-searchbar"
        // Rest of the code remains unchanged...
    />

Do you have any recommendations or suggestions on how I can achieve this functionality successfully?

reactjstypescriptmaterial-uiautocomplete

Answer №1

Essentially, the steps to follow are:

  1. Utilize the renderGroup prop and insert your jsx for columns.

  2. Make use of the ListboxProps prop to apply display:flex for the results.

  3. If necessary, explore the PaperComponent and PopperComponent for additional customization.

Below is a snippet showing what you may require:

  <Autocomplete
    renderGroup={(item) => {
      const { group, children } = item;
      if (group === "type1")
        return (
          <Box
            sx={{ width: "50%" }}
            /*custom props for type 1*/
          >
            {children}
          </Box>
        );
      return (
        <Box
          sx={{ width: "50%" }}
          /*custom props for type 2*/
        >
          {children}
        </Box>
      );
    }}
    ListboxProps={{
      sx: { display: "flex" },
    }}
  />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to choose a particular Excel spreadsheet in Angular before importing the file?

I am currently working on a new feature that allows users to choose a specific Excel worksheet from a dropdown list before importing a file. However, I am facing some difficulty in adding the worksheet names to the dropdown list. Right now, I have placehol ...

htmlangularexceltypescriptfrontend

The TypeScript error occurs when attempting to assign a type of 'Promise<void | Object>' to a type of 'Promise<Object>' within a Promise.then() function

I'm currently working on a service to cache documents in base64 format. The idea is to first check sessionStorage for the document, and if it's not there, fetch it from IRequestService and then store it in sessionStorage. However, I've encou ...

javascripttypescriptpromise

Troubleshooting problem with CRUD operations in MySQL, Express, React.js, and Node.js

Is there a way to post data from three input fields in a form to a MySQL database table using Axios? I have attempted multiple times but have been unsuccessful. Can someone provide the code for connecting to the database and inserting the query? //PostFo ...

mysqlnode.jsreactjsexpressaxios

Animating the Click Event to Change Grid Layout in React

Can a grid layout change be animated on click in React? For instance, consider the following component: import { Box, Button, styled, useMediaQuery } from "@mui/material"; import Row1 from "./Row1"; import React from "react"; ...

cssreactjstypescriptmaterial-ui

Center and justify image inside flexbox using MUI

Can someone explain why my image appears centered but not justified? I'm feeling confused about this. <Box sx={{ display: 'flex', minHeight: '100vh', alignItems: 'center', flexGrow ...

htmlcssreactjsmaterial-ui

What is the reason for labels appearing inside select boxes?

Can someone help me understand why my select box label is displaying inside the select box? For example, when I am not using react-material-validator it looks like this: https://codesandbox.io/s/5vr4xp8854 When I try to validate my select box using the r ...

javascriptreactjsvalidationmaterial-designmaterial-ui

The request to search for "aq" on localhost at port 8100 using Ionic 2 resulted in a 404 error, indicating that the

Trying to create a basic app that utilizes an http request, but facing challenges with cors in ionic 2. To begin with, modifications were made to the ionic.config.json { "name": "weatherapp", "app_id": "", "v2": true, "typescript": true, "prox ...

angulartypescriptionic2

Opt for ion-select with a range of i to j options

Looking to set up an ion-select menu in Ionic4 where users can pick a value between 20 and 220 without manually typing each number. I attempted to use the approach detailed in this post Tersest way to create an array of integers from 1..20 in JavaScript ...

angulartypescriptionic4

The issue of HTTP parameters not being appended to the GET request was discovered

app.module.ts getHttpParams = () => { const httpParamsInstance = new HttpParams(); console.log(this.userForm.controls) Object.keys(this.userForm.controls).forEach(key => { console.log(this.userForm.get(key).value) const v ...

angulartypescriptangular8

Vercel deployment issue: Hidden input values not being detected as expected

Whenever I attempt to update the data on Vercel, an error message is displayed: invalid input syntax for type uuid: "undefined" - unable to save Oddly enough, the data updates successfully when done locally. This is how I submit the form: <form onSu ...

javascriptreactjsnext.jsvercelsupabase

Having trouble retrieving the necessary data to generate a menu, the getStaticProps function is coming back as undefined

I'm currently working with Next.js 13 & Strapi, and my goal is to create a Menu component utilizing the getStaticProps function. To achieve this, I've implemented a Layout component within the _app.js file, and nested a Menu component inside the ...

javascriptreactjsnext.js

I am having trouble displaying notifications in my ReactJS application while using react-redux-notify

I am currently using the react-redux-notify library to display notifications in my application. Utilizing a functional component structure, I have carefully followed all the instructions provided on their Github repository. Below, I have shared the code sn ...

reactjsredux

Troubleshooting connectivity issues between Entities in microORM and Next.js

While trying to run my Next.js application in typescript, I encountered the following error: Error - ReferenceError: Cannot access 'Member' before initialization After consulting the documentation at https://mikro-orm.io/docs/relationships#relat ...

typescriptnext.jsentitiesmicro-orm

To implement a filter in MongoDB, make sure to specify a function argument before

Utilizing TypeScript, Node.js, Mongoose, and MongoDB in my project. I have a function that resembles the following: async function getAllBooks(title?: string, authorName?: string, sortBy?) { const books = await bookModel.find().sort(); return book ...

node.jstypescriptmongodbexpressmongoose

Can you provide guidance on how to access my account using the code that I have?

I'm having trouble getting the login functionality to work properly with this code. When I click the login button, nothing happens - no errors are displayed either. Can you help me identify what might be causing this issue? login() { var url = &ap ...

angulartypescriptionic-framework

A guide on extracting the element from a ref using React

One challenge I am facing on my website involves a third-party library that requires sending an element as a parameter, like this: window.third-party("test",document.getElementById("test"),...) While this works well on some of my sites ...

reactjs

Leveraging JavaScript packages without the need for npm or yarn

When working with React, I am able to incorporate the library simply by adding the following two lines of code: <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.c ...

reactjspackage.json

Combinations of Typescript dependent unions

I'm struggling with calling the given union that wraps a function and its argument. Is there a way to call it without having to cast? type Wrapper = { fn: (a: string) => void arg: string } | { fn: (a: number) => void arg: number } let f ...

javascripttypescript

Revamping the static method signature of a class in Typescript

One of the modules I'm using is called some-module and it defines a class like this: export declare class Some<T> { ... static create<T>(): Some<T>; map<U>(x: U): Some<U>; } export default Some In my project, I ...

typescript

Personalized Shade Selection for Papyrus

Is there a method to specifically alter the color of the box-shadow for the mui Paper component? I have a black background, making the shadow not visible. I've tried createMuiTheme({ overrides: { MuiPaper: { root: { boxShadow: & ...

reactjsmaterial-uimaterial-designnext.js