Expandable Search Bar with Quick Search

Ask the community
,
1

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.

1220×1218 88 KB

1098×976 67.9 KB

2744×470 48 KB

2

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"})
}
3

Thanks for the answer, it was able to show up. Turns out it would be best to have it collapsed on load and I replaced the show command with the expand command.

Since I’m a newb to JS, how and where in the code can I be able to toggle the event on click, and add a smooth animation as the bar opens and closes? Oh, it seems that it overlaps the search icon as it opens :frowning:

Of course when it expands, it overlaps the menu items as seen in this picture:

1612×130 13 KB

Is there a way I can get the menu items to move back and forth as the search bar expands and collapses?

Thanks for all you do!

4

Well technically, I couldn’t add an animation effect to the collapse/expand command so I switched back to the hide/show command.

912×308 28.1 KB

Now I was able to get it to expand and collapse both on click. The two problems I have with it now is that:

  1. the menu items do not move along when the search bar expands, and I would like to shrink the number of menu items at the same time as it moves.

  2. if you notice in the video below, the box comes out from right before the search icon, and not on the icon. I would like to have it come out of the icon instead of the space before it.

5

Why It is showing invalid selector for searchbox ?

note: ID for search bar is searchbox.

6

@admin2532 Any updates?