Autocomplete
Bootstrap Autocomplete
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a huge discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount
The Bootstrap Autocomplete component predicts the words being typed based on the first few letters given by the user. You can search the list using basic scroll and the keyboard arrows
A basic example MDB Pro component
With our component you can easily add to autocomplete menu what you want.
You only need to add arrays in JavaScript with your variable
and you have to initiate that variable
with our JavaScript code.
For example:
Autocomplete within a form MDB Pro component
With MDB Autocomplete you can use forms to implement our practical component.
Check our documentation about forms.
Sign up
or Sign up with:
Autocomplete within a modal box MDB Pro component
You can also easily use MDB autocomplete with modals.
You can show modal with our component to make your website more attractive. Chek our documentation abouts modals.
For example:
JavaScript options
Option can be passed via JavaScript.
Name | Type | Default | Description |
---|---|---|---|
data | array | [] | Apply a data in a array. |
dataColor | color | '' | Change color of data items |
inputFocus | color | 1px solid #4285f4 | Change color of input when is focusing |
inputBlur | color | 1px solid #ced4da | Change blur color of input |
inputFocusShadow | color | 0 1px 0 0 #4285f4 | Change shadow color of input |
inputBlurShadow | color | '' | Change blur shadow color of input |
visibleOptions | number | 5 | Change the number of visible options |
Options example