Search Toggle with auto focus

Design help Custom code
1

Hi there

Does anyone have experience with Webflow Search and custom triggers in java script for autofocus?

I have a hidden search field inside an overlay which will be opened by a search icon toggle in the navbar. How can I make the search text field autofocus after clicking the toggle?

Thanks for any help!

2

Hi @cedi44, thanks for the post.

You probably could do something like capture the click event on the trigger element that the user is first clicking in the navbar, then use the click event to trigger setting focus to another element by ID using the Focus method.

It would look something like this:

// put code in Footer Code section
<script>
$( "#trigger-icon-ID" ).click(function() {
  document.getElementById("myTextField").focus();
});
</script>

The “myTextField” is the ID of the text field to focus on, the text field must not be set to display none at time you call this.

I hope this gives you a little something to check and play around with.

.cd

1 Like
3

Hi @cyberdave
I am a really JS newbie, so I just replaced the IDs from your code with the IDs of my two elements, but it didn’t work. :confused:

I did this:

<script>
$( "#searchtoggle" ).click(function() {
  document.getElementById("#search").focus();
});
</script>
4

I have the overlay the textfield is in set to display none before the click. Maybe this is the problem?

5

Hi @cedi44, yes, if the element is set to display none, the element cannot get focus. There may be errors in the browser console that show what the issue is on the published site if you can help to publish the site, custom code is only rendered on the published page.

Being able to see the behavior on the site helps if you can share the published test url.

.cd

6

Oh yes, its working when I have the wrapper not on display none. But what should I do when my search overlay is all over the regular content? hahah
nothing is clickable anymore beause its not displayed to none anymore and all the site content is below it in z-index.

7

Hi @cedi44, thanks for your reply.

Without being able to see how you have that setup in the designer, it is hard to say.

Would it be possible for you to help share some additional detail that will help to provide assistance?

Thanks in advance,

.cd

8

Ok sure, so here is are the links

Webflow share link: https://preview.webflow.com/preview/reduzed?utm_medium=preview_link&utm_source=designer&utm_content=reduzed&preview=24afc8303815632af55070d4c0dda3c3&workflow=preview
Staging URL: https://reduzed.webflow.io/
PW: cedi44

You will see the page, and as you can see the page below the navbar is not clickable. Thats because there is a transparent white overlay on top of it which you will see as soon you open the search.

9

I now just removed the full-height overlay of below the search bar and moved the closed search flyout behind the main navbar. Works now, without the white overlay, but this one wasn’t that important. Thank you for your help!

Really appreciated!

10

Hi @cedi44, thanks for the update, yes, I just was looking and see you removed that.

Thanks for letting me know, do not hesitate to reach out in the community anytime :slight_smile:

.cd

1 Like
11

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.