Velo by Wix Tutorial | How To Create an Auto-Suggestion Search bar

hello everyone how are you my name is alex and today i’m gonna show you uh a new amazing tutorial which uh lots of you guys have asked me through email and this one it’s uh it’s an autocomplete search bar that will help you a lot in your searches so what’s it’s this tutorial is about creating a search bar that as soon as you type it will show you a list of in this case i’m going to use countries and cities and then as soon as you click on this
cities you’re going to have the item showing right just right below it so i’m going to show you the live example to give you an idea of what it looks like okay so this is my site which i just created okay this is a search bar and i added here some cities in all around the world so for example i have paris let’s see what happens when i start typing paris okay you see i have here this city showing okay now if i delete now i have two uh cities in
italy which are rome and florence if i type italy i will have florence and rome and here i also have the results found so see what happens when i click either on florence or rome let’s click on florence see i have here florence showing and the search bar gets auto-populated based on the value that was given from the drop down so if i delete it the repeater will be will collapse and then again i can search let’s say i have new york that’s it even
if i click on usa it will still get this item see what happens new york okay so let’s find out how can we create this beautiful feature okay in my editor sorry as you can see this is my editor and i’m gonna guide you step by step on how you can create this and by the way i’m gonna paste the code so and as well i’m gonna give you the link of this tutorial on the description so you can find the website there okay first of all we need a search bar
which we can find here in the menu in inside input we can just add the text input i just added the first one then we add a repeater okay and this one it was a repeater i’m gonna show you which one i selected um if you go to list and grids you just go uh down here okay this one you see the yellow one and i just grab it and delete the five elements so i just have i just work with one element anyway you can keep the five but just to make things
clean you can leave only one and then inside i have this uh this city and country and these two are connected to the field in database my database it’s here i call my database locations as you can see and then i’m gonna show you how i build this database just a moment okay you see i have title which i didn’t put anything and then i have this column this column called city and this column called country okay i just zoom it in a bit and then i have
some images just to make it more beautiful okay so you see i have like florence miami berlin paris rome dubai london token and new york and their country here on the right okay now let’s close here and then here i have also this total result text which will tell me how many items we found and here i added a loading gif and then here i have another loading if and here i have the repeater that shows the total results okay just to start you need to
have this one two three eleven this search bar this repeater for to show the results and this other repeater to display what you have click here on the yellow one okay uh very important thing this repeater must be collapsed a lot so if you see here this one is collapse or not okay and i rename this repeater to repeater search okay then the search bar i just label it search bar as you can see here the id is search bar the loading gif is loading if
and the total result text by the way sorry the loading gif also is hidden or load as you can see it’s hidden okay and as well the total results here which i call total result text it’s hidden almost okay and then as well this loading gift tool which is related to this repeater for the results it’s hidden or load and this repeater for the results it’s not hidden on load but it’s collapsed a lot the reason why i choose collapse over hidden is
because they are pretty the same but the thing is when i use collapse i make sure also on mobile it works in a better way so it doesn’t so when i use collapse usually i get like a nice uh nice uh view on on the mobile without having so many like blank spaces you know okay so what i did then before showing you the code is this i added two data sets and this both this uh both data sets are both connected to the same database which is in this case
locations okay but the first one this one is dataset search is connected to this repeater which shows me the results given from this search bar here the second one location results is connected to this repeater which is again connected to the same uh location database and i’m gonna show you here i just connected the image this text and this other text to the to their field so this image is connected through the image field as you can see here see
connect data set this one is connected to the location results which is this one okay so this one connects to the image and this text connects for it connects to the country and this one connects to the city and the same here this text city connects to this data set here the location search connects to city and this country text connects to the country field which you can see here okay so basically these two repeater the yellow and the blue one
here big they are both connected to the same database so you don’t have to create more databases okay so now we can start showing you the code okay first thing you have to import the wix data library here online one you can see you can just import this week’s data library then what you can do is to activate the on key press event for the for this uh search bar here which you just have to click on it and then hand down here on the properties panel
which now it’s a bit different the wix has changed a bit the design but it’s almost the same you can find here the onky press event you just click here and then press enter on your keyboard once you press enter you will have this event handler activated so you will have everything which you can see now from line nine more or less so then what you have to do you have to paste exactly what i have here okay this one okay when you activate the search
bar on keypress event you will have something like this empty okay inside this event you have just to paste this code okay so i will just go quick to show you why i put this data but anyway once you paste you will study the code and try by yourself so what i did is as soon as someone digits on the search bar i want the repeater results the one below this one on the blue one to reset the data so that’s why i put like square brackets and then i
want this repeater to collapse then what i do i set timeout which uh uh half second here you can see 500 it’s it means half second and 1000 it means one second 1500 it means one second and a half but i’m okay with 500 and you need this timeout in because usually the browser is not as fast as us when we type so we need to give like half second to recognize what we are writing inside the search bar so in this set timeout i did something cool which
is this one i added an if as statement but in this way i’m saying to the website that if the search bar value dot length is uh equal or greater than two then do this why i did this because uh the reason why i am telling the website that to start filtering once we have two or more characters in the search bar is because we might have very huge databases so i don’t want that as soon as the user starts typing we will have the result showing
because this might cause slowing down the search a lot so by um by adding like two or three or four we have less results depending on how big your database is okay for example i’m going to show you live now it’s set on two which you can see which you can see here so if i start typing one letter let’s say like the letter of let’s type france if i type f nothing will happen but see what happens when i put r you see it start filtering did you see
the loading if i’ll show you again okay so it’s two or more so if i type like another letter it continues filtering okay this is just something like you can keep it as one or zero but for me when you work with a lot of data it’s better to start the search with at least two or more characters in the search bar so now for example i’m going to show you if i put 4 see what happens i’ll publish so we should get uh f r a n before we get france let’s
refresh the page and check it out okay let’s let’s try again f r nothing you see before we are having the result of a nothing again and then as if we type n that’s it you see we have it now so this is like a really cool function which i strongly suggest you to try because it will help you a lot in maximizing the speed of your site and you know and also to improve the user experience for your clients okay then what i did here also is after putting
this i want the loading gif to show which is this one on the right okay you can see now okay um and then i start to filtering the data set and i use but just a moment uh the data set i’m talking about is this one the location search data set the yellow one so what i’m doing here i am filtering the data set so i said data set search set filter wix data filter dot starts with city search bar value or i added an argument which if i don’t find any
city then try to search the country okay and then i added this function count which you might have seen already in my previous video so this function in just this one here which is just basically like uh i’m counting the length of the repeater so if it finds some item then expand the the repeater which is like if the total it’s greater than zero which means like if if it if it is at least one then show me the repeater expand and then update this
text to whatever number which is the total here inside the dollar sign and brackets in the curly brackets result found as if i don’t find anything just collapse the repeater and show me this text zero result found okay and then any hand show me the text and hide the loading if which is this one okay so i call this function just inside the if else statement here on the if only i had it here okay and then else if i don’t find anything just i
collapsed the repeater i had the loading if and i had the result text okay then we can move forward and now is the interesting part so what you have to do now uh you have to activate the on item already for the second repeater this one the repeater results so if you click here uh ah sorry not this one sorry still the yellow one sorry yeah if you click on the yellow one you can see here i activated the on item ready event so once activated let me
show you and just make it a bit bigger okay you can see better like this now so inside this event you just need this piece of code from line from line 51 till thin line 90 okay so i’m gonna explain you what this code does so by calling the repeater on item ready we are working with the single elements okay so for example i’m going to show you just making this one blue smaller okay we are working when we use their own item ready we are working
with one single element which which is like in this case we might be the first one the second or the third only okay so in this case as you can see here i have the i just create a variable and i call this variable id so let id equal to item data dot id so by calling item data dot id i am actually calling this i this field in database which i’m going to show you now if you click on locations and then you search the id field which usually is hidden
click on manage fields and then you see here id i’m gonna make it visible for you so the id has the field key if you click on properties you will see the field key is underscore id okay this is very important it’s crucial so i’m just taking this underscore id and i am basically renaming to id instead of writing item data dot underscore id then what i do i uh i add an on click event for the city text which if you remember is this one remember i
added the city text here and the content text okay so i add an event handler an on click event for this to uh text okay you you can see here so in this case i don’t use dollar w but i use dollar item because we are working as i said with one item per time okay so i call dollar item city on click and then i do this inside you just have to paste this one okay just don’t worry so this one just saying that it will show me the second loading if which
is this one so when i click this one will appear and then i will visit the repeater results which is this one and then here is very interesting i will just populate the search bar value with the text we have here in the yellow one for example as you can see here if i type like rom so now because i put the four letters okay let’s try with the longer one uh let’s start with london okay i put loaned look what happens as soon as i click on london you
see the search bar gets populated it gets the same name and is the same if i click on uk i will have uk here right so if you want to do this you have just to copy this line so search value search bar dot value it’s equal to the item city text and then what i do in this this time i will filter the second data set which is the data set results so i just call the data set filter so w data set results set filter wix data dot filter equal to to the id
which is underscore id and id which is this one first we which we have declared here okay because in this way since they are they both come from the same database so the best way to retrieve the same items is just to grab the same id which i have here on the on the yellow one so if i click on this one on this id of this city sure i will get the same city here on the blue because they have the same id so once i found the right element so once the
field once a data set finds the id then i will just do this i will expand the repeater which is one the blue one i will collapse instead the yellow repeater which is this one and i will hide the second loading if which is this one okay and then i would just call this three which is like repeater search the yellow the yellow one i will just reset the repeater search i will hide again the loading gif tool and i will also hide this total result text
okay and the same is for the second text the country it’s exactly the same as you can see here i just did the same for the country on click i just copy paste everything inside so the only thing i change is to change the value inside the search bar which this time is the country text and not the city text because now i’m working with the country item in editor okay so that’s here i forgot to add this to here just copy paste okay now i will just i
revert to two here and i will publish now that’s it publish i will show you once again live refresh so i have miami in florida if i type miami and i okay one result found i click on miami i have miami populated here on the search bar and i have miami in the repeater then when i delete the repeater will collapse i still have the results showing then if i click on usa i still have miami and then let’s try with berlin i am berlin here i click on
berlin and i have berlin here okay so thank you so much guys please like this video comment and subscribe to this channel i’m looking forward to upload my video and you will find the link of this site in the description and as well the the full code in the in the description as well okay thank you so much and i’ll i will see you soon bye bye