Show quick links in search results box on input focus

[OksanaRomaniv]

Hello,

I have a question about search box customization. Is there a way to show quick links when user focus input before he types anything? I want the same behaviour as on this page – https://support.apple.com/
I read through actions and hooks and didn’t find any regarding the search box itself. Could you please advice what API functions I can use?

Thank you,
Oksana

[Ernest Marcinko]

Hi Oksana!

Unfortunately that is not possible. This would need a complete front-end customization, including custom HTML and scripts. Using only API functions will not help in this case.

Alternative #1
However there is a built-in auto populate feature, which can display either the latest results or results to a phrase whenever the page loads: Auto populate documentation

Alternative #2
There is an API function that can be used to trigger a live search to a specific phrase. I have quickly made an example custom code, which contains a script that does the following:
– It adds a javascript to the site footer, which
– ..binds an event handler function to the first input focus event of the search bar
– ..in this function a search API call is executed
– ..which then displays the results to this phrase

Add this custom code to the functions.php in your theme/child theme directory (copy from line 3 only!). Before editing, please make sure to have a full site back-up just in case!

Change the searchID variable to the search instance ID, and the phrase variable to the search phrase you want to have executed upon the input focus.

I hope this helps!

[OksanaRomaniv]

Hello Ernest,

Thank you for your quick reply and listed alternatives.

I work as a front-end dev and I hope I can create this custom HTML and scripts that you suggest. Could you please advice the best way to hook this block into the search results box? Please note that I’m not asking you to code this, of course, I understand that it’s beyond the scope of the support. I just hope that you can suggest the most non-invasive and compatible with future updates way to add HTML block to the search results so that positioning of the results box isn’t ruined and search is properly triggered when the user starts to type.

Thank you,
Oksana

[Ernest Marcinko]

Hi Oksana,

Sure, I can help you with that 🙂

Accessing the results box properly without search is currently problematic, as it is processed first, then resized, all in different private methods. There is no API function to access the box opening function, and the workaround would be too complicated in my opinion.

Instead I have quickly made a custom solution that should start you off. This is update proof as well. Basically this script will:
– append the ‘aspCustomLinks’ div element to the end of the body element, so it is relative to it – which allows positioning it to the search bar
– then on the input focus it moves the lement just below the search bar, then displays it
The other script hides it, whenever the search start event ‘asp_search_start’ is fired. And that’s it. I’ve also included a bit of styling to it.

I hope this helps you out.

[OksanaRomaniv]

Hello Ernest,

This a perfect! Thank you very much for your time and the solution 🙂

I really appreciate your great work.

Thank you,
Oksana

[Ernest Marcinko]

You cannot access this content.

[Author]

Posts