Hi guys,
I'm working on adding an expandable search bar with quick search. Right now, I got the search bar element to hide and added a clickable vector art of the search icon so then it'll be able to expand and then show the instant results I want when a user types in the bar.
I was trying to follow the steps of this posting below, but some reason I can't get it to work. I wonder if this method or code is outdated.
https://www.wix.com/corvid/forum/community-discussion/expandable-site-search-bar-similar-to-corvid
What I have done so far is to hide the #searchBox and then made the #searchIcon clickable.
Pictures are below. Please tell me what I did wrong and what I can do to make this work. Thank you.
![](https://static.wixstatic.com/media/a27d24_5c9a3d95a80e47b78e99bacab8867e92~mv2.png/v1/fill/w_980,h_978,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/a27d24_5c9a3d95a80e47b78e99bacab8867e92~mv2.png)
![](https://static.wixstatic.com/media/a27d24_f35a46e9d91e464aa8db8cee95076542~mv2.png/v1/fill/w_980,h_871,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/a27d24_f35a46e9d91e464aa8db8cee95076542~mv2.png)
![](https://static.wixstatic.com/media/a27d24_7e0ff44310314f789885ea6f2c4f1bbb~mv2.png/v1/fill/w_980,h_168,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/a27d24_7e0ff44310314f789885ea6f2c4f1bbb~mv2.png)
For starters in your first pic you have the user input setup as both hidden on load and collapsed on load.
You only need the one of them to be selected and the example from J.D. in the linked post is for hidden on load.
Then in your second pic you have the code set up as '$w("#searchIcon").onClick', whereas when you have added the onClick event through the properties panel for the search icon it shows it as 'searchIcon_click.
All event functions used to have on before the event like you can see in the properties panel in your pic, however that has now been taken out of the actual code and it is just shown as click for example.
Also, note that when you use code like this...
$w("#searchIcon").onClick((event) => {
That the event handler function is written into the code itself so that you don't need to add the event through the properties panel.
When you add the event through the properties panel it adds a new line to your code like this.
export function searchIcon_click(event) {
So you just need to change the lines over to suit your onClick event and put it as hidden on load only and it should work for you.
Something like this.
$w.onReady(function () { }); export function searchIcon_click(event) { $w("#userInput").show("slide", {direction: "right"}) }