Live Search form - Press "Enter" to search

How To
1

Hello everyone!

I’m trying out the new Bricks Builder filters and live search, and it’s working amazingly well.

My only 2 questions are:

  1. Is it currently possible to redirect to the results page, with the keyword attached, after clicking enter on the search bar?

  2. If not, is there a code I could use where clicking a button redirects to the results page, with the keyword attached?

Thank you for your time.

2 Likes
2

I would love to know this as well

3

No solutions for this still?

4

Hi everyone,

Yes, this is now possible using Filter - Submit / Reset element.

1- In the Filter - Search element, set the expression s for the URL parameter.

a

2- In the Filter - Submit / Reset element, make sure you have selected the Action action. Then, in the Redirect to field, enter your website domain.

b

You can also paste the following codes into the Builder to quickly achieve the desired result.

{"content":[{"id":"ibznyn","name":"section","parent":0,"children":["qriqyg"],"settings":{}},{"id":"qriqyg","name":"container","parent":"ibznyn","children":["jvbdcn","zkoopa","uzjxzu"],"settings":{"_rowGap":"20"}},{"id":"jvbdcn","name":"filter-search","parent":"qriqyg","children":[],"settings":{"filterQueryId":"yeuhxo","filterNiceName":"s"},"themeStyles":{}},{"id":"uzjxzu","name":"block","parent":"qriqyg","children":["yeuhxo"],"settings":{"_cssGlobalClasses":[],"_display":"grid","_gridTemplateColumns":"1fr 1fr 1fr 1fr","_gridGap":"20"}},{"id":"yeuhxo","name":"block","parent":"uzjxzu","children":["lkgczp","wwmgna"],"settings":{"hasLoop":true,"_rowGap":"10","query":{"post_type":["product"]}}},{"id":"lkgczp","name":"image","parent":"yeuhxo","children":[],"settings":{"image":{"useDynamicData":"{featured_image}","size":"large"}}},{"id":"wwmgna","name":"heading","parent":"yeuhxo","children":[],"settings":{"text":"{post_title}"}},{"id":"zkoopa","name":"filter-submit","parent":"qriqyg","children":[],"settings":{"text":"Filter","style":"primary","filterQueryId":"yeuhxo","redirectTo":"domain.com","newTab":true},"themeStyles":{}}],"source":"bricksCopiedElements","sourceUrl":"https://avangtheme.ir","version":"1.12.3","globalClasses":[],"globalElements":[]}

I hope it was useful for you :blush:

5

But as there is no way to submit on enter and have live results at the same time, I made a JS code that mirrors the text to a hidden basic search element, and copies the enter press too. Now I don’t need the Bricks search’s URL parameter, is there a way to disable it?

6

I have the base search item hidden, and the Bricks Filter - Search item. With this code it works like a charm:

jQuery(document).ready(function ($) {
    $("#secondary-search input").on("input keydown keypress keyup", function (e) {
        let value = $(this).val();
        let target = $("#primary-search input");
        
        // Set value
        target.val(value);
        
        // If Enter is pressed, try multiple ways to forward the event
        if ((e.type === 'keydown' || e.type === 'keypress' || e.type === 'keyup') && 
            (e.key === 'Enter' || e.keyCode === 13)) {
            
            // Remove preventDefault from original event
            e.preventDefault();
            
            // Simulate Enter event in multiple ways
            // 1. jQuery trigger
            target.trigger('keydown', {key: 'Enter', keyCode: 13});
            
            // 2. Native KeyboardEvent
            const enterEvent = new KeyboardEvent(e.type, {
                key: 'Enter',
                code: 'Enter',
                keyCode: 13,
                which: 13,
                bubbles: true,
                cancelable: true
            });
            target[0].dispatchEvent(enterEvent);
            
            // 3. Form submit simulation
            target.closest('form').submit();
        }
    });
});

Now I only need to disable the Bricks search url and it is done!