How to create a search bar for my site?

Discussion Ask a question
, ,
1

Hello everyone. I’m new in this community and I have no experience whatsoever in coding. But I want to know how can I create a search bar for my site? Wix doesn’t offer this feature. There are some third-party options in the App Market, but I don’t like them.

I want my users to be able to type and search for specific words, topics, tags while on my site.

Has anyone created a search bar for their site? Can you assist me please? I’ve voted for the feature on Wix but it has been a year and still they are not providing with the option.

Any help is greatly appreciated.

2

There’s already an article with template about this, try Googling it.

3

This assumes your search input field is called searchInput. Disclaimer: this isn’t perfectly written but it works. I just needed something done quick and this is what I’m using at the moment. There are also comments in it for my amigos who don’t know js. You probably also don’t need the if else section, but I included it in case you did. “make” and “model” are the names of the fields I’m searching in the collection, this is going to be where you add whatever fields you want searched.

EDIT: you probably/might not need to .toString()'s in there either. I come from a game dev background and it’s just habit because of Unreal, Radiant and Unity making my life miserable for 12 years with random proprietary wrappers being introduced to the UI devs every other month.

This code searches across two seperate fields, you can obviously remove or add fields. The search is executed by clicking a button.

export function searchExecute_click(event) //searchExecute is the button name
{

searchInfo = $w(“#searchInput”).value; //store user’s input
const byMake = wixData.filter().contains(“make”, searchInfo.toString())//creating one filter
const byModel = wixData.filter().contains(“model”, searchInfo.toString())//creating 2nd filter
$w(“#dataset1”).setFilter(byMake.or(byModel) //apply both filters to dataset
.then( () => //Once the filtered dataset has been returned
{

     **if** ($w("#dataset1").getCurrentItem() !==  **null** ) //if there are matching items 
                { 
                  //add your code here if for what happenes if there are results 
                } 
     **else** 
                { 
                  //add your code here for what happens if there are no results 
                }

})
}