Search...

Autocomplete

React Bootstrap 5 Autocomplete

React Bootstrap 5 Autocomplete or autosuggest is a feature owned by a component that that predicts the words based on the first few letters given by a user while typing it. It takes in an Array full of suggestions. You can use and arrow keys to navigate through options and use the key to select the required option.

Importing the React Bootstrap 5 Autocomplete component

You should first import CDBAutocomplete into your project to use the Contrast React Bootstrap 5 Autocomplete Component.

js
import { CDBAutocomplete } from 'cdbreact';

Default Autocomplete

Pro Component
js
import React from 'react';
import { CDBAutocomplete, CDBContainer } from 'cdbreact';
const Autocomplete = () => {
const countryList = [
'Afghanistan',
'Albania',
'Algeria',
'American Samoa',
'Andorra',
'Angola',
'Anguilla',
'Antarctica',
'Antigua and Barbuda',
'Argentina',
'Armenia',
'Aruba',
'Australia',
'Austria',
'Azerbaijan',
'Bahamas (the)',
'Bahrain',
'Bangladesh',
'Barbados',
'Belarus',
'Belgium',
'Belize',
'Benin',
'Bermuda',
'Bhutan',
'Bolivia (Plurinational State of)',
'Bonaire, Sint Eustatius and Saba',
'Bosnia and Herzegovina',
'Botswana',
'Bouvet Island',
'Brazil',
'British Indian Ocean Territory (the)',
'Brunei Darussalam',
'Bulgaria',
'Burkina Faso',
'Burundi',
'Cabo Verde',
'Cambodia',
'Cameroon',
'Canada',
'Cayman Islands (the)',
'Central African Republic (the)',
'Chad',
'Chile',
'China',
'Christmas Island',
'Cocos (Keeling) Islands (the)',
'Colombia',
'Comoros (the)',
'Congo (the Democratic Republic of the)',
'Congo (the)',
'Cook Islands (the)',
'Costa Rica',
'Croatia',
'Cuba',
'Curaçao',
'Cyprus',
'Czechia',
"Côte d'Ivoire",
'Denmark',
'Djibouti',
'Dominica',
'Dominican Republic (the)',
'Ecuador',
'Egypt',
'El Salvador',
'Equatorial Guinea',
'Eritrea',
'Estonia',
'Eswatini',
'Ethiopia',
'Falkland Islands (the) [Malvinas]',
'Faroe Islands (the)',
'Fiji',
'Finland',
'France',
'French Guiana',
'French Polynesia',
'French Southern Territories (the)',
'Gabon',
'Gambia (the)',
'Georgia',
'Germany',
'Ghana',
'Gibraltar',
'Greece',
'Greenland',
'Grenada',
'Guadeloupe',
'Guam',
'Guatemala',
'Guernsey',
'Guinea',
'Guinea-Bissau',
'Guyana',
'Haiti',
'Heard Island and McDonald Islands',
'Holy See (the)',
'Honduras',
'Hong Kong',
'Hungary',
'Iceland',
'India',
'Indonesia',
'Iran (Islamic Republic of)',
'Iraq',
'Ireland',
'Isle of Man',
'Israel',
'Italy',
'Jamaica',
'Japan',
'Jersey',
'Jordan',
'Kazakhstan',
'Kenya',
'Kiribati',
"Korea (the Democratic People's Republic of)",
'Korea (the Republic of)',
'Kuwait',
'Kyrgyzstan',
"Lao People's Democratic Republic (the)",
'Latvia',
'Lebanon',
'Lesotho',
'Liberia',
'Libya',
'Liechtenstein',
'Lithuania',
'Luxembourg',
'Macao',
'Madagascar',
'Malawi',
'Malaysia',
'Maldives',
'Mali',
'Malta',
'Marshall Islands (the)',
'Martinique',
'Mauritania',
'Mauritius',
'Mayotte',
'Mexico',
'Micronesia (Federated States of)',
'Moldova (the Republic of)',
'Monaco',
'Mongolia',
'Montenegro',
'Montserrat',
'Morocco',
'Mozambique',
'Myanmar',
'Namibia',
'Nauru',
'Nepal',
'Netherlands (the)',
'New Caledonia',
'New Zealand',
'Nicaragua',
'Niger (the)',
'Nigeria',
'Niue',
'Norfolk Island',
'Northern Mariana Islands (the)',
'Norway',
'Oman',
'Pakistan',
'Palau',
'Palestine, State of',
'Panama',
'Papua New Guinea',
'Paraguay',
'Peru',
'Philippines (the)',
'Pitcairn',
'Poland',
'Portugal',
'Puerto Rico',
'Qatar',
'Republic of North Macedonia',
'Romania',
'Russian Federation (the)',
'Rwanda',
'Réunion',
'Saint Barthélemy',
'Saint Helena, Ascension and Tristan da Cunha',
'Saint Kitts and Nevis',
'Saint Lucia',
'Saint Martin (French part)',
'Saint Pierre and Miquelon',
'Saint Vincent and the Grenadines',
'Samoa',
'San Marino',
'Sao Tome and Principe',
'Saudi Arabia',
'Senegal',
'Serbia',
'Seychelles',
'Sierra Leone',
'Singapore',
'Sint Maarten (Dutch part)',
'Slovakia',
'Slovenia',
'Solomon Islands',
'Somalia',
'South Africa',
'South Georgia and the South Sandwich Islands',
'South Sudan',
'Spain',
'Sri Lanka',
'Sudan (the)',
'Suriname',
'Svalbard and Jan Mayen',
'Sweden',
'Switzerland',
'Syrian Arab Republic',
'Taiwan',
'Tajikistan',
'Tanzania, United Republic of',
'Thailand',
'Timor-Leste',
'Togo',
'Tokelau',
'Tonga',
'Trinidad and Tobago',
'Tunisia',
'Turkey',
'Turkmenistan',
'Turks and Caicos Islands (the)',
'Tuvalu',
'Uganda',
'Ukraine',
'United Arab Emirates (the)',
'United Kingdom of Great Britain and Northern Ireland (the)',
'United States Minor Outlying Islands (the)',
'United States of America (the)',
'Uruguay',
'Uzbekistan',
'Vanuatu',
'Venezuela (Bolivarian Republic of)',
'Viet Nam',
'Virgin Islands (British)',
'Virgin Islands (U.S.)',
'Wallis and Futuna',
'Western Sahara',
'Yemen',
'Zambia',
'Zimbabwe',
'Åland Islands',
];
return (
<CDBContainer>
<CDBAutocomplete label="Which country are you from" suggestions={countryList} />
</CDBContainer>
);
};
export default Autocomplete;

Autocomplete usage within a Card

Other than the CDBAutocomplete component, we'll be using other Contrast React Bootstrap 5 components in this section. These components are CDBIcon, CDBCard, CDBBtn, CDBCardBody, CDBInput to follow up on this tutorial, please check out the docs on these components.

js
import React from 'react';
import {
CDBAutocomplete,
CDBIcon,
CDBCard,
CDBBtn,
CDBCardBody,
CDBInput,
CDBContainer,
} from 'cdbreact';
const Autocomplete = () => {
return (
<CDBContainer>
<CDBCard style={{ width: '100%' }}>
<CDBCardBody className="mx-4">
<div className="text-center">
<h3 className="dark-grey-text mb-5">
<strong>Sign in</strong>
</h3>
</div>
<CDBInput label="Your email" group type="email" validate error="wrong" success="right" />
<CDBInput label="Your password" group type="password" validate containerClass="mb-0" />
<CDBAutocomplete
suggestions={['White', 'Black', 'Green', 'Blue', 'Yellow', 'Red']}
label="Choose a Color"
/>
<div className="text-center pt-3 mb-3">
<CDBBtn type="button" gradient="blue" className="mx-0 btn-block">
Sign in
</CDBBtn>
</div>
<p
className="dark-grey-text text-end d-flex justify-content-center mb-3 pt-2"
style={{ fontSize: '0.8rem' }}
>
or Sign up with:
</p>
<div className="row my-3 d-flex justify-content-center">
<CDBBtn type="button" color="white" circle className="me-md-3">
<CDBIcon fab icon="facebook-f" className="blue-text text-center" />
</CDBBtn>
<CDBBtn type="button" color="white" circle className="me-md-3">
<CDBIcon fab icon="twitter" className="blue-text" />
</CDBBtn>
<CDBBtn type="button" color="white" circle className="z-depth-1a">
<CDBIcon fab icon="google-plus-g" className="blue-text" />
</CDBBtn>
</div>
</CDBCardBody>
</CDBCard>
</CDBContainer>
);
};
expot default Autocomplete

Autocomplete With the "getValue" Callback Prop

A 'getValue' prop is also available in the Contrast React Bootstrap 5 Autocomplete component. This property accepts a function that is called whenever the input value changes, i.e. on every onChange event.

IMAGE HERE

js
import React from 'react';
import { CDBAutocomplete } from 'cdbreact';
export const Autocomplete = () => {
const suggestions = ['Football', 'Basketball', 'Baseball', 'Sprint', 'Wrestling'];
const useValue = value => {
alert(value);
};
return <CDBAutocomplete suggestions={suggestions} label="Choose a sport" getValue={useValue} />;
};

Contrast React Bootstrap 5 Autocomplete Props

This section will broaden on the props available with the Contrast React Bootstrap 5 Autocomplete component. You'll learn what these props do, how to use them, and what their default values are.

The table below lists other prop options of the CDBAutocomplete component.

NameTypeDefaultDescriptionExample
suggestionsArrayempty arraySuggestions to display<CDBAutocomplete suggestions={[item1, item2]} ... />
getValuefunctionReturns input value on onChange event<CDBAutocomplete getValue={logValue} ... />
labelStringSets label for Autocomplete input<CDBAutocomplete label="Select your country" .../>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.