Are you finally ready to learn how to finish the search function on your Wix website? So you can now search for profiles throughout your social network. If so, join me on today's video as we complete the search function.
Now before we hop into that, if you have not caught up in our series on building a social network in Wix The Non-Coding Founder’s Guide, the last part that I just did yesterday, isn't a central part in stepping stone to today's video. So click the card above to watch that, and also catch up on the rest of the series because it goes in a chronological order and it helps you build the entire social network from start to finish. So make sure you see those.
If you have followed and you are caught up guys, well, welcome to today's video hit that like button, if you've enjoyed the series so far, and don't forget to smash that subscribe button right down below. So you don't miss an episode of building a social network in Wix Non-Coding Founder's Guide. I'm releasing one new part each day up until Christmas as my Christmas present to you guys. And then you obviously don't want to miss on-going Wix Training content following the holidays.
So guys with that said the code for today's search function video can be found in wixtrainingacademy.com. You can click this “ACADEMY” button to register completely free. If you haven't registered already or click log in, it'll redirect you to your dashboard and just click the code snippets tab under your profile icon. And that's where you can access the code from today's video. So without further ado, let's hop in.
Adding A Custom Search Function with Wix Code
So bridging off of last video, we did our search results page. That's what we designed. That's what we built in. I'll go to that page right now. So you can take a peak just to jog your memory. We added our dataset. We added the repeater. We connected our data to the actual physical database. So now our user profile pictures here, name’s here, handles, your bio is here and all of that has been connected.
Now what we have to do is add the physical search bar search icon in the search code to perform the actual function itself. To do this, it’s actually very easy. Just follow my steps, the code, although it may look a little bit intimidating is not at all. I'm going to walk you through it really easy. And you'll be like, just like that. You've got a new search function on your website and you can design it however you want.
Adding The Search Bar
Now we're going to go back to our homepage for the purpose of today's video. I'm going to add the search bar to the homepage. Now listen to this though. If you'd like to add it on different pages, you use this same exact process, except you just have to make sure you add that search bar and search icon on the pages You'd like to utilize it. And also add the page code that we're going to use on those same pages, so that way it still functions properly.
So first things first, I'm going to preface this by saying, I've already added the code in here on the website, and I'm going to walk you through it to show you exactly how it works and to make it as minorly intimidating as possible, because truly it really is not. But I could understand some people sometimes get a little intimidated by code, which is completely understandable. It's not always the most relatable thing. It's like looking at a foreign language.
So first things first, what we have to do is we have to analyse what we've got on this page. Again, the code can be found on Wix Training Academy click “ACADEMY” to access to “Code”. So first it says import { local } from ‘wix-storage’ , this means it's searching the database. So it's pulling from the Wix storage, the local Wix storage in the database from the site.
Then we're going to use the import wixLocation , because after we searched the database, we want to direct them to a search results page. So that's the second step of it. Once that happens, we have the function. So it says “.onReady ( function”, this is where the search button comes into play.
Now, what we have to do is actually add the elements and I'll walk you through that second part of the code there. So now that we've got an understanding of the first part of the code, we have to add a search bar, right? We need some something so people can search it to type in to so they could search to do that.
We're going to go to “Add” and just like someone would be filling out a user input form. We're going to go down to “User Input” and we're just going to pull one of these text inputs up here. I'm going to use this one right here. I don't know why. I kind of just liked the look of it. Once we've got that added, we're going to press “Settings”. We're going to change the input type to “Text” because people are going to be searching with texts. And then we're going to change the placeholder text to “Search”.
After we've done that, if we open our code backup, we'll see that we need to ID that. If you wanted to use the same exact IDs as I do, we need to change our IDs this search bar to “searchBar”. Now you can change yours to whatever you want, but just make sure it correlates. So you know that this search bar right here is this part in the code where mine says searchBar.
So you can name it whatever you like your ID, but just realize that I'm going to change my ID over here in the properties panel into “searchBar” (search capital B bar), because that second word first letter is always capital in JavaScript. And if we click back onto our code, we'll see this red error disappear ready? Bingo! Because now it recognizes that this search bar is what the code is speaking of.
So now that we've got that in there, we see search word, “local. setItem(searchWord”, that's completely fine. So that whole process right there is fine because that's taking whatever you write in here and it's classifying it as search words. So you don't have to change that all. But what does have to change is we see that this is an “export function searchButton”. So we actually need to add a search button now that someone will click to actually perform the search.
So in order to do that, what we have to do is since, I don't know about you but personally, I want to add like a search icon. You can add whatever button your heart desires, but I want mine to look like a physical search icon. So to do that, I'm going to “Add” and then I'm going to go down to “Vector Art”. I'm going to click more icons and I'm going to use Wix’s internal search function to search for search. And then I personally like this search icon right here. I think it looks the most like a search button. So I'm going to click that. I'm going to go ahead and shrink it down a little bit. You're going to pull it right here. I'm going to shrink it even a little bit more. I'm going to put it at the end of the line there. So it looks like a search function.
Now what I'm going to do is I'm going to go back to the code and we could see right here “export function searchButton”. So my ID for this little icon has to be search button, but what I'm going to do is I'm going to copy and paste this right here and show you how to actually add the on click function here. So I'm going to delete the current on click function and show you how to do it.
So now that we've got that again, you guys can use whatever ID you want for this. Just make sure it corresponds to the code. I'm going to use my “searchButton “again, capital B for that second word, first letter. And now what we have to do is we have to add our “onClick” function. So we're going to click this little plus button next to onClick and then hit enter and the function has been added.
Now I copy and pasted the code from internal in the search function. And I'm just going to add that back in there, just like that. And we already went over this code, except for this last part of it here. I'm going to drop this little bracket down there. The last part of this code that is a key a central part is this “wixLocation. to”. You can see mine says “/search-results”. This is where part 1 in yesterday's video comes into play. So part 1, we built out our search results page.
Page Extension
So in order for me to get this page extension, I have to go back to menu and pages go to “SEARCH RESULTS”, and I have to click on the page, “SEO & Social. When I click on that, I'm going to scroll down and I'm going to see “What's the page URL?” and you can see it says “ /search-results”. So for anyone wondering where I got that page extension, it always starts with a forward slash and then it's whatever this text is right here. So mine is search-results. That's our search results page.
So we're going to go back into our homepage and we're going to see that we've got it added “/search-results” your pages may differ depending on what you name them. You can change your URL in that SEO settings on that page like we just did, but I find it easiest just to copy the name that's in there and it's “/search-results”. So now we've got a functioning search bar in search button on this page, however, we're not finished yet. We now have to make sure our search results page is ready to accept the physical search itself.
So now our homepage is set, so this page is done, It's set. We're going ahead and save it. And then what I'm going to do is I'm going to group these items. I'm just going to simply click to the left of it and scroll over with my cursor and then “Group Elements”. And then I'm going to Ctrl+C, copy it. And now we're going to our search results page. I'm now going to press Ctrl+V or command V. I'm going to get rid rid of this search button, because in the code I don't have it coded into where they're searching again. I have it to where whatever they searched is now going to be displayed in that search bar. So their search term will be displayed on that search bar.
So now we've got our search bar in here. We've got our repeaters all set. We have to now open the code on this page for anyone that's going to the Wix Training Academy. One says initial search page in this case, that was the homepage. And then the second one says search results page. And both of them have the code lined out. So if you're following along with that, that's how you know which one is which, the search results page code is the search results page code.
Search Results Page Code
So now we're going to open the search results page code, and we're going to take a peak at it here. You can see there's a lot going on in this code. This is where I don't want you to be intimidated. So just like the previous part with the homepage, we see import local from Wix storage, searching the local storage. So searching the local databases import wix-data, importing from the Wix database.
And now we have an “.on ready( function”. So this was from the same thing that we had in our first part of the video here, which was the actual physical function that came through. So it says var sameWord = local.getItem(“searchWord”) so remember from our homepage code, it said search word. That's the word that was searched. So it's saying, get that word. And then it says the value here.
So I'm going to show you how this works. If click back on the code, we see our search bar. So it says (“#searchBar”).value = sameWord, so what that means is it's going to display whatever word you search right here in the search bar. And then it also says (“#searchBar”).placeholder. And once again, it's the same word. So it's going to show that same word that's been searched right here. So that way your user understands what they searched and then it'll display the results.
I'll show you the second part of it down here, the next part of it says (‘#profilesearch’). So now this is a key essential part right here. This profile search is going to perform a function. Our profile search is our dataset. So again, you can name your dataset on your search results page, whatever you want. Key point here, I don't mean the name of the dataset. I mean the ID, so whatever your IDs, each dataset, if you open, it has a data set name. That's not what we're using here. We're using the dataset ID, the JavaScript code corresponds with IDs, so that's what we're using.
I named mine profileSearch. You can name your ID, your dataset on your search results page, whatever you want. Just understand, when you get to this profile search in my code, that's the dataset that we're talking about and it's going to perform a function. And that function is search and what that means is it's going to search the dataset, which means it's going to search the database that's corresponding to that dataset. That's why we use the dataset. The dataset is the connection point between the two.
Then it says “search” and we just leave that code as is, if we scroll down our code, the next thing we'll see is export function searchButton_click, search. So this, you don't have to change anything on it. This is carrying over from the homepage. This is saying when that search button that we added on the homepage is clicked. It's going to perform a search function, just like we had set on the homepage. That's just carrying over to the search results page. You keep that code as is.
Now, if we get down a little bit, we see a few more items. It says function search. So this is where the actual physical search function comes into play. This is the juicy meat of it all guys, this is where you really gotta pay attention. So it says wixData.query. So essentially what this is saying is which database is this searching. And this is where we'll put the database name that your user profile information is stored that it is searching.
In my case, if we open our little tree here, my user profile database is called UserProfileData, so I went ahead and added that as my database in the code. That's the name of the database. That's what you're going to put here. So whatever your database your searching, you need to put the name of that right here after .query.
After that, you're going to see a couple different lines. You're going to see .contains. This dot contains means when it searches the database, if any of the following criteria that you searched is named in that, all it has to do is contain a word. So it doesn't have to be an exact match. You likely want your search to be like this, so that way someone searching doesn't literally have to search exactly the right name or the right bio that is stored in the database.
You'll see .contains(‘fullName , so this is the name I'm going to pause for a second. Keep following here, guys. I know this is a lot, but if we go to it .containsd(‘fullName, if we go to our database, is the field key for our full name in the database. So if I go on this Manage Field, our field key is fullName. So essentially if we go back to the search result page here, this is saying, if whatever so contains .contains(‘full name’, (“searchBar”).value).
So whatever is searched in here, if it contains anything in this full name category, say we type in Michael, which I will show you in the video that it populates these results, because Michael is part of the full name in that user profile data. Scrolling down, we'll see, .or.wixData.query. Again, this is the database that houses your user profile information.
So we're going to add another part of the code here. We don't want them to just be able to search by full name. We want them to also be able to search by bio. I set bio, in this case you can add as many of these .Or as you want. In this case, I did full name and bio is what they can search by. So we want it to contain again. We don't want it to have to be an exact replication of someone's bio. We want it to contain any of the words you search for.
So once again, we're querying the user profile database, mine is called UserProfileData. So make sure when it comes to this point, you type in the name of that database that you're searching right here, that contains, if we went back to my database here, the name, field name of bio is bio. So that's the field key for the profile bio in the database.
So if we go back to the search results page, it says, .contains and it's searching the bio field in the database (“#searchBar).value). So whatever searched in here, if it contains anything that contains any of the words, letters relating to anything in the bio field of the database, it'll populate it in the search results.
Then the final part says your .find so it's saying find it in the database. So if it finds any of these following in the database, it's then says .then this means after it finds it, it says .then(res, so the res means results in repeater1. So this $w(‘repeater1’), means it's going to display the results in repeater1. Repeater 1 is the ID of this repeater that I have here. You can see the ID repeater1.
So whatever your repeater name, or repeater ID name is on your search results page is what's going to go right here. And it says .data = res.items. So it shows the data that's been pulled based off of the search function right here. And again, my ID name for this repeater is repeater1.
And then we scroll down and that is the end of the code. That's it! That's how you add the search function. I know I went line by line in the code in that, maybe a little confusing and a little bit intimidating. I understand, but it's not all that hard if you follow this video exactly. As I just showed you you'll have a search function on your website in no time. But other than that, guys, that is how you add the search function.
Now I'm going to show you how it actually performs really quickly. If we go here, what you are going to press is “Publish”, we've got everything set. We're going to go to “View Site”.
Now I'm just going to type in here my name, because I know I have a profile in the database, so I'm just going to type in “michael”. Bingo! Just like that, it populates Michael. I have two profiles in there. I have one Handle, Michael Strauch and then one Handle Stauchy.
Let me show you how this works. So I searched the full name, so that was an example of a partial. So it contains Michael in the full name. But if I type in and I change it, I go back to the home and I'll try CEO. I get another result because I have CEO in the bio. It's not an exact replication of the bio, but he contained CEO in the bio. I could do the same thing if I go back to the homepage and I type cool, we'll get another version of my profile because in my Michael Strauch version, “I like to think I'm a fairly cool guy!” And I hope you guys think the same. If you do drop a like down below, because you know, I'm making these videos and I think that's kind of cool. Do you agree? But that's how it works guys. That's how the search function works.
And if I went back to the “Home” page and I typed in “coffee”, we'll get my profile because one of my parts in the bio says “Coffee Enthusiast”. And it's that intuitive. It works just like that! So in this case, it's scrubbing and searching the full name column of the database and it's scrubbing and searching the bio column of the database. And that's exactly how it works. It's that simple.
Conclusion
So let's get a thumbs up for the search function in the subscription down below, because you enjoyed this content and I've provided you some value. If not, don't worry about hitting either of those two. But if I did, just maybe go ahead and click it for me that subscribe button. So that way you don't miss any of these videos, because I want you to build the best social network on the internet using these tutorials. Thank you guys very much!