How to display search dialog from a different HTML element?

Open Q&A
#1

Hi everyone!

I would like to display the search dialog from a href link instead of using the default search UI. In other words, let’s say I have a button on the page. When this button gets clicked, I want to display this dialog:

image
image1648×1018 75.5 KB

How can I do this? What function should I call?

Thanks,
Kirupa

#2

One of my motivations for doing this is to defer loading the 29KB script until the dialog is actually invoked. Any help would be appreciated here :slight_smile:

#3

I’m only moderately terrible at JS, but I can’t figure out how to selectively call the search dialog when I click a button! Any hints? :slight_smile:

#4

I am still having issues here. Can someone please point me in the right direction?

Thanks,
Kirupa

#5

@kirupa you’ll want to set up an event handler on the element you want to trigger the dialog from. Are you using any JavaScript framework like jQuery, React, etc or are you using vanilla JS to trigger this action? Happy to help and provide a code sample. Thanks!

#6

@michael.king - thanks for the quick response! I am just using Vanilla JS :slight_smile:

#7

@kirupa no problem!

Here’s a quick example:

#8

Thanks! This is perfect. I’ll make the updates on my end shortly to use it :slight_smile:

1 Like