This React application provides an autocomplete search feature using Material-UI's Autocomplete component to search and display user details fetched from the JSON Placeholder API. Users can search by name, and the application displays their formatted name and address.
- Autocomplete Search: Users can type into the search input and see suggestions that match their input, formatted as
{Last Name} {Suffix}, {First Name} (Title)
. - User Details Display: Upon selecting a user, their name and address details (street, suite, and zipcode) are displayed below the search bar.
- React: A JavaScript library for building user interfaces.
- Material-UI: A popular React UI framework that provides styled components and icons.
- TypeScript: A superset of JavaScript that adds static types.
To get this project up and running on your local machine, follow these steps:
- Node.js (v14 or later recommended)
- npm (usually comes with Node.js)
- Clone the repository:
- Install NPM packages:
npm install
- Start the development server:
npm start
Begin typing a name in the search bar to see live autocomplete suggestions. Click on a user name to view their detailed information displayed dynamically below the search bar.