Up next in 10
Build a React.js Bootstrap Autocomplete Combobox Widget Using react-autosuggest Library in JSX
Jan 9, 2025
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you how to
0:04
create a bootstrap autocomplete combo
0:07
box widget so if you have a series of
0:10
options as the user types out you will
0:12
see this autocomplete options appearing
0:15
and user can May select any of these
0:17
options and you'll see some information
0:19
about that object being selected so it's
0:22
just very simple example I will show you
0:24
in this video there is a package for
0:26
this Auto suggest which which fetches
0:29
these
0:30
which is used for making this auto
0:32
complete as the user right you will see
0:34
all these options
0:36
appearing so the package name is uh if
0:40
you go to npmjs.com and just search for
0:44
react Auto suggest this is actually the
0:54
package react Auto
0:58
suggest so this is actually uses
1:01
bootstrap in the background as well so
1:03
this is a command so to install it it's
1:06
almost having 83,000 weekly downloads
1:09
and for this we do need to install two
1:13
more packages react bootstrap which is
1:15
required for this package you simply
1:19
install this as
1:21
well and apart from that we also need to
1:25
install the base bootstrap package as
1:28
well so install this as well so we need
1:32
these three packages I've already
1:34
installed it so I will just show you a
1:36
very basic example so first of all we
1:39
need to import all these three packages
1:42
by using the import
1:45
statement so we import the base package
1:48
then the bootstrap CDN and then this
1:50
pre-made components from react bootstrap
1:53
so after
1:55
this we will declare a array of objects
1:59
which will hold the autocomplete options
2:01
for us this data can be coming from a
2:04
database or an API as well but for this
2:06
example I'm just taking a static data
2:09
which is an array of object each object
2:11
is having two properties name and
2:13
info so I will give all the source code
2:17
in the description so you can get this
2:19
source code and then for this component
2:22
we will have two variables two State
2:24
variables one for keeping track of which
2:28
search value the user will right for
2:30
this we'll have the U State and then for
2:33
the suggested items the autocomplete
2:36
items for this as well we will have
2:39
an array initial value will be an empty
2:42
array so here it'll be showing the
2:44
autocomplete suggestions whenever the
2:47
user types and also last but not least
2:51
you'll also be having a variable for
2:53
keeping track of which item the user
2:56
will select and for this we will
2:59
initially value will be
3:01
null like this so now we have these
3:03
three state
3:05
variables so now to embed this we come
3:08
to wherever we need to embed this and
3:11
for this we will wrap everything in this
3:15
container component of
3:19
bootstrap and we'll give it a class name
3:22
of margin top
3:25
five and we'll be giving a row
3:30
of justify content
3:38
Center so these are all bootstrap
3:48
classes and here we embed our component
3:51
Auto suggest and it actually takes the
3:54
suggestions which are there in the
3:56
suggested
3:58
items and then
4:00
we have a series of call back functions
4:02
which we can configure using this
4:04
component Auto suggest one such call
4:06
back is on
4:08
suggestions fetch requested and this is
4:12
actually a function responsible whenever
4:14
you
4:15
type we need to fetch the suggestions
4:18
and for this we will Define a custom
4:20
function for this on suggestions clear
4:23
requested so whenever you want to delete
4:26
all the suggestions then that for that
4:29
as well we have a call back and then we
4:32
have get suggestions value and this will
4:35
be executed whenever you need to fetch
4:37
the suggestions as the user type and
4:40
we'll be binding
4:42
this
4:44
suggestions.
4:46
name this Library contains this call
4:49
back function as the user types these
4:51
suggestions will automatically come and
4:53
we basically give the name of the
4:54
suggestions in this
4:57
function and lastly render suggestion so
5:01
we need to show the suggestion render
5:03
out the suggestions and for this also
5:06
the suggestions will come automatically
5:08
in this variable and now to show the
5:11
suggestions we use the div tag and
5:14
directly right here at itself we can
5:17
show the suggestion
5:19
name that's
5:22
all so if you try to see whatever it you
5:27
will see this input field uh
5:30
appearing there is some kind of error on
5:33
suggestions fetch is not we need to
5:36
declare all these call back functions
5:39
that we defined so one by
5:42
one so what I will do I will Define all
5:48
this so if you refresh now
6:08
you will see this input field now
6:09
appearing
6:11
and you can actually now as the user
6:15
types you will see the suggestions
6:17
appearing and you can click any of these
6:19
suggestions and you will see additional
6:21
information about it so we binded this
6:24
when the user selects any suggestions
6:27
this on suggestion selected is a call
6:29
back function which is there in this
6:32
package and we binded this function and
6:34
input props you can give an on change
6:38
here and then for showing the
6:41
information we are simply comparing that
6:43
if the selected item is defined then we
6:45
are displaying more information about
6:47
that selected item
6:49
so this is a complete example and we
6:53
have these all the series of our
6:55
functions available to us which we are
6:58
filtering the item based upon the value
7:00
given we using the filter function of
7:05
JavaScript so this is actually the
7:07
package uh react Auto suggest you can
7:09
directly use it uh this is a full
7:11
example I will give the source code in
7:14
the description
7:15
so thank you very much for watching this
7:17
video and do check out my website as
7:20
well free mediat tools.com uh which
7:23
contains thousands of tools regarding
7:25
audio video and Mage and I will be
7:28
seeing you guys in the next video
#Educational Software