Sigma Hosting
Menu
Check my NEW SITE AND FULL COURSE! https://www.wixcoding.com/home
in this video I’m gonna show you how to create a simple and easy search bar for your Wix Website using Wix Code.
— My name is Alex and this channel’s purpose is to help newbies with Wix Code with very simple tutorials and tricks that will improve your Wix Code Experience. I started studying Wix Code only in 2018 and making many improvements since then. —
For enquires: wixcoding@gmail.com
FB Group: https://bit.ly/2Umrukt
Instagram: @wixcoding
WhatsApp: 971 56 3222980
PayPal link: https://www.paypal.me/aless90
—————————————————————————————————————-
hello heavy one my name is Alex and in this channel I’m gonna show you some tricks that I learned using in Wix code so has you know weeks it’s an amazing platform that just I think one year ago more or less one year and a half ago has released a part which is a coding park so this part is called Wix code so I will show you today what I’m learning so far with Scott but just to clarify guys I’m not an expert I’m not a programmer I am NOT I
cannot consider myself somebody really amazing at it so my journey with Wix code has started around six seven months ago I didn’t know anything anything anything about coding I swear and but I really became so passionate about learning something new new skill I wanted to do something more in my life and you know I was studying JavaScript and Wix code and I’ve been studying a lot so I met many progress so far so this challenge is just for you guys
so for people like me who didn’t have any idea about Wix code JavaScript so I hope in this channel you will have much better idea of Rick’s code and I hope to help you a lot doing your website creations for your friends or clients so what I’m gonna show you today is something that I see many people were struggling with so this is a creating a search bar that will filter the members or cities or hotels whatever new website is forth so this search
bar will help you filter the results in your page so let’s get started and see how to do this from A to Z so here I am in my editor as you can see so let’s suppose that I am creating a membership website so I will list many people in my website okay so the first thing to do is to create a collection so how we do that okay look my editor looks like that because I opened it previously but for you you may not have this left menus here that high off
so what you have to do in order to show this menu you just have to go here to tools sorry to code and here you see you have this button which is turn of developer tools in your case if you don’t turn this menu you should have turned on developer tools okay so as you can see if I turn it off it just goes blank or blank now I’m gonna turn it on again here it is okay this is the first step once done this we go here to add new collection database
click and then add new collection once click here you have to name the new collection so in this case I want to name it members and then just click create collection so now as you can see okay I have created this one we previously because I named it members so they save some information but don’t worry I’m gonna delete all of this and show you from the very beginning what we can do so ok so now as you can see in my collection I have three fields
sorry for but we’re gonna use holiday title name City and image so in this case I will not use title so we’re gonna focus only on name city and image so what we have to do now in this for example in the name field let’s say that as I said before we want to create a member website okay so let’s create for example a couple of members so let’s add more items let’s say we have six members okay the first one is for okay then Alex then mark then Sarah
then Julia and then let’s say Robert okay so let’s say Paul lives in New York Alex in Miami and Mark in Toronto SIA in Los Angeles Julia in Tampa Florida and Robert in Detroit okay so for now I will also add an image for each of these members let’s click on image so just to let you know this field is different from the others this is just text but this one has a plus sign why because if you click here on manage properties you will see the fill
type is image for the other ones is text for this one is image because we wanna upload an image so just keep it like that as you can see here city management this is text an even name is text okay so I will now upload some random images just to let you know just to show you what we can do this one I know it’s Paul this is a woman but it’s okay I think Paul will not get upset this one sorry guys for my English I mean I’m not a native speaker so I
hope you will understand me I’ll try my best then this one this one and let’s give Robert is anyone I like him okay I think looks so nice okay so now we have our collection ready if name city an image that’s good so let’s go back to the page here home and then we have to add an element something that retrieves the members here so how we do that so for doing that it’s very easy how just you just have to win here to add in this menu click on it and
then on user sorry no on least and grids go down to listen grids and select the repeater you prefer it can be anyone don’t worry for this example I prefer to use this one because it’s like member repeaters okay now we have our repeater great so what we have to do we just to connect this repeater to the members collection so how we do that okay if you click to this repeater you will see that here you have a son you have icon and it’s called
connect to data okay so if you click on it the website will tell you start by creating and the data set okay so you just click here create data set and then you will choose a collection remember all of these below that data base our collections so members is a collection so she’s a collection and choose members because now it’s the only one available okay then q8 that’s great so now your data set it’s created and no worry this one will not be
visible to users but only to you so now we have a curated data sets but we didn’t connect the elements yet so how we do that again we have here if you see very well how to image a name and a description and a big this big in the description longer description so for now I don’t need this description here so I’m gonna delete it okay so let’s connect the image by clicking on the image the title in the city so click on the image first and then as we
did before with a repeater this element has this icon connect to data so if you click on it you see that it’s already connected to the members that data set so image connects to select image done then click on the name do the same connect to data text connects to name you see now this one are highlighted because this is text the week’s recognize that it is a text so it will give you the same options you cannot connect a text to an image and with
rasa so let’s connect the title sorry the name to the name and then let’s connect this texts to the city okay so we have connected our repeater to the connect to the collection McManus I will show you right now how your page will look like let’s preview it okay here it is you see guys you have Paul mark saga Alex Union Robert okay so so far I think it’s very easy but anyway if you have some problem by doing this just write a comment below so now
let’s create a search bar that will filter these members so how we do that we do that by going again here on add and then we go up to that not soil to use their input so here we select one of this you see you have many options here like input text box radio buttons Bob nouns etc so let’s click on this now we need one input let’s click on one of these I like this one the last one okay here it is we added a search bar for our repeater so how does
this work I’m just here let me write search members okay so now we have to tell this search bar to filter the elements here so how we do that we do that by clicking on the search bar on the properties and then we click here on key press this one see all events have a plus sign in this case we need on key press so let’s click on it and see what happens okay now if you open your editor your code editor you will see that an event has been created
export function input one key press so just to tell you input one comes from this search bar name if I click on it we see guys here it is input one okay so this is the name you can change it but I left input one as it is so what we have to do now now we have to tell the search bar how to filter members and we do that by writing some codes that I will show you here so first of all before writing the code here we have to import the width data this
is very simple you just write it here at the top you can start typing import weeks in court weeks data from weeks data okay so runs once written you can now start writing your code so we say that we want to filter the members by name okay this is very important you can even filter by name by city by other fields you got a great on your collection depends how you wanna create a new website so for now let’s keep it really simple and let’s filter by
using the name okay so let’s go in here and let’s start typing this and now I will tell you why we have to type in this way so let let’s take okay let search value equal to dollar W input one remember because it is the input 1 input 1.5 you okay so I will explain you why I’m writing this type of code in this way this input 1 dot value became just this search value so next time instead of writing all of this I will just have to write this search
volume it’s very important because it makes your code cleaner and easier remember always try to be very clean in your code and everything will be more simple okay so what we don’t know now let’s filter the results so let’s start by writing this code dollar W data set one dot set filter have it here already then weeks data filter then that contains you see you have here now property name and string so what we said we wanna filter we said you wanna
filter the name so in this case we have to go back here and check what will filter in this case we want to filter the neighbor right so if I click your name or manager properties I see that v key it’s name so we’ll have to write this it is very important okay and you see he’s not with uppercase it’s all with lowercase so let’s go back there and here just write me and was think you just put this value search value that’s it is very very simple
guys at the beginning I did not understand anything over this as but you will see that by practicing little by little you will also understand and everything will be much easier so let’s see if our code works I hope so that’s it ok so now we have our search bar let’s say that if I type mark if in this case the other one should disappear so Paul sorry Alex at cetera they should all disappear and all you mark should be there let’s say mark da you
see guys you like it it’s very very easy honestly guys it’s very easy let’s try another one let’s try porn here it is now let’s try Julia here it is so guys really it’s very very easy honestly okay so but I want to show you also something else let’s say no you wanna filter not only the name but you wanna filter the city as well because now if I write New York nothing will happen because in my code I put only the name to filter the name but now we
want to filter only also the city so how we do that let’s go back to it back to editor see we have to write exactly the same code we have here but instead of putting name we just have to put city so Rick Scott has an handy options that you can do this by writing after the brackets here you can just put dot or and then I will copy this part here from weeks data to search volume I will just copy and here I will write city okay there is something
here okay should be okay now yes okay you will see now I have city as well so let’s try it and see what happens let’s go to preview and let’s type Toronto Toronto here it is I didn’t even finish typing and here it is so let’s search for Miami and here it is guys so this is all I hope you enjoyed this video please subscribe to my channel I will upload a lot of videos and let me know what you think about in the comments and anyway I will also try
to copy this code so you can just paste it to your website so it’s going to be easier for you to understand and to learn about so thank you guys hope you enjoy and I see you soon my life