Up next in 10
Build a React.js Autocomplete Combobox Form Input Field With Search & Filtering Items 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:03
in this video I will show you a
0:05
autocomplete field form field how to
0:08
make that with search and filtering
0:10
options as well in react sh so it's a
0:13
combo box combo box widget autocomplete
0:17
so we have this input field and as the
0:19
user start to type autocomplete options
0:23
will come as soon you will see as I'm
0:25
writing react this auto complete is
0:28
coming I can select this once I select
0:30
this you will see the selected item and
0:32
also we'll show some detailed
0:33
information about this selected item so
0:36
this was actually a very simple
0:38
application you will see as soon as I
0:40
start to write these autocomplete
0:42
options will come in this so I can
0:45
select any of these options as I select
0:47
this we can show a nice little
0:52
panel talking about more about that
0:55
selected item so this we are not using
0:59
any third party package for this we are
1:01
we will be building it from scratch in
1:03
react CH all the source code I've have
1:05
given in the description so now let's
1:07
get started so first of all you need to
1:10
make a functional component and then you
1:12
need to
1:15
declare some State variable so we need
1:19
two variables for that first is the
1:20
search term we need to keep track of
1:23
whichever search item the user write we
1:26
for this we will have a UST State hook
1:29
initial value will be nothing and the
1:31
second item we also need is selected
1:34
item so whatever item the user will
1:37
select we also need to keep track of
1:39
that as well so or for this also we will
1:42
use a UST State hook initial value will
1:44
be null so now we actually declared
1:47
these two variables and after this we
1:49
will declare an aray of items that we
1:52
need to have for the auto complete this
1:54
will be an array of items each object
1:58
will have some certain properties
2:00
ID value and info so for the simple
2:03
example I taking this items we are
2:06
declaring a stating items but this can
2:09
be coming from a database or Json API as
2:12
well for the simple example I am just
2:15
taking the static
2:17
data so we will have these four items
2:19
for the
2:20
autocomplete you can have as many data
2:23
that it it can be coming from a database
2:26
as well so now we have this array of
2:28
items we have declared the this variable
2:31
now coming to the jsx we come to the jsx
2:34
and right here we give it some styling
2:36
to
2:37
it and we give it some padding here 20
2:40
pixel and we give it a Max width
2:47
of 400 pixel and then we give it a
2:50
margin of Auto just to center it and
2:54
after this we will have this autoc
2:57
complete search
3:00
and then we'll be having this input
3:04
field input type
3:08
text and we have a placeholder which
3:11
will be
3:12
search and we binding this value which
3:16
is the search term which we have
3:17
declared the variable in the state and
3:21
also you'll be binding this onchange
3:23
event handler so whenever you change the
3:25
value in inside the input field this
3:28
call back function will execute and here
3:30
we'll be up updating the search term by
3:33
using this hook function so whatever the
3:35
value is written by the user we will
3:38
update the state and also you'll be
3:40
giving some styling to this input field
3:43
we'll be making the WID to 100% padding
3:47
I will say it's around 8
3:52
pixel and then I will also be giving
3:55
some margin from the bottom position
3:57
which will be 10 pixel and the box size
4:00
I will change to border box these are
4:04
the styling and if you just refresh your
4:06
application you will see this input
4:08
field appearing autocomplete but as I
4:10
search it no autocomplete options are
4:13
coming for that options to come we just
4:16
need to add this bottom position we put
4:18
a restriction in this condition that if
4:21
the filtered
4:24
items so for this filtered items we do
4:27
need to declare
4:30
this uh I think
4:33
yeah this filtered items we need to
4:37
declare it so it it will be
4:41
actually a
4:43
simple so whatever search term the user
4:46
rights based upon that we trimmed it
4:49
first of
4:50
all and we will put a tary condition
4:53
that if it's empty then do don't do
4:56
anything but it's if it's not empty then
4:59
we need to f filter out the items based
5:01
upon the autocomplete search so here
5:05
you'll be using the filter method which
5:07
is a built-in method in JavaScript and
5:10
we take the value and convert this to
5:13
lowercase and whatever items which
5:16
includes the
5:17
title we return those items which
5:20
matches the search term in this easy
5:24
way this is actually the filtered items
5:28
which will have so for this based upon
5:30
the search term we first of all trim it
5:33
then we use this tary to condition and
5:36
we filter out the items we convert the
5:39
value to lower case and then use the
5:41
includes function to only include those
5:44
items which matches the Search terms so
5:46
this
5:48
is after doing
5:54
this so here you'll be comparing that if
5:57
the filtered items
6:01
this will be an array so here we'll be
6:03
comparing if the length is greater than
6:05
zero if items are available in that case
6:09
we need to show them and now for showing
6:12
it we'll be using the unordered
6:15
list so I will first of all list stle
6:18
type I will just make it to
6:20
none and I will just give it some
6:23
spacing so padding I will give it to
6:26
zero margin as well zero
6:30
so then again filtered items I will map
6:33
map each item and for
6:38
this use the list
6:41
item and for this I will give it a key
6:43
parameter which will be item. ID and
6:47
whenever you click on any of this
6:49
individual item you will bind this
6:52
inline function and we will be binding
6:54
this custom function handle item and we
6:56
will pass this specific item
6:59
and we also will give some styling
7:01
information to this list items we paste
7:06
The Styling
7:07
information and then we simply bind the
7:10
item value which is item do
7:14
value so now if you
7:21
select we just need to Define
7:24
this handle select function so I will
7:28
just go to it
7:37
if you try to see just write something
7:41
you will see these autocomplete options
7:43
will come as I type here react so
7:46
whenever I click on these items I need
7:48
to show the panel information so for
7:51
doing this first of all whenever you
7:53
click the individual item this function
7:55
will execute hold holding that specific
7:58
item so first of all we will be saying
8:01
set selected item to be that item and
8:05
that set search item to be set search
8:10
term to be
8:11
null that's the two things that you need
8:13
to do and now we come to the GSX part
8:17
and right below that whenever this UL
8:21
tag is ending so we simply say if the
8:23
selected item is defined in that case we
8:26
need to show more information about that
8:28
selected item
8:30
item so inside this H4 we will say
8:34
selected
8:37
item and then we have a simple paragraph
8:40
inside this strong tag we simply display
8:44
the selected
8:47
item dot value
8:52
and then we'll show a little bit of info
8:55
about that selected item
9:07
so if you just
9:09
now click on that you will
9:13
see you can give some stylings as
9:16
styling is not necessary just give it to
9:18
this div
9:23
tag you can see that so it has it you
9:27
can now do it for any item as you type
9:30
this auto complete will occur so for
9:33
this we haven't used any third party
9:35
package we have built it from scratch
9:38
this is actually the autocomplete combo
9:41
box widget you can directly make if you
9:44
have some data you can directly make it
9:47
static data you have you can declare it
9:50
and build out this a awesome
9:52
autocomplete in react Chas thank you
9:55
very much for watching this video I have
9:57
given this source code in the
9:58
description so also go to my website as
10:01
well free mediat tools.com uh which
10:04
contains thousands of tools regarding
10:07
audio video and image and I will be
10:09
seeing you guys in the next video
#Programming
#Software