WAIT: Live search sometimes adds Display: block to search results

[Victor1999]

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

Sometimes in live search, when the search results are displayed, Display: block is added to the search results, causing the search results structure to break. But it doesn’t always add up, just sometimes.

{"content":[{"id":"lwvqch","name":"section","parent":0,"children":["oepgyb"],"settings":{}},{"id":"lhnaiz","name":"block","parent":"heyfja","children":["zmayit","dxunyr"],"settings":{"_direction":"row","_justifyContent":"space-between","_alignItems":"center","_columnGap":"10","_position":"relative","_flexWrap:mobile_landscape":"nowrap"},"label":"Search box"},{"id":"zmayit","name":"filter-search","parent":"lhnaiz","children":[],"settings":{"filterQueryId":"aupoye","_padding":{"top":"10","bottom":"10","left":"50"},"_border":{"width":{"bottom":"1px","top":"1px","right":"1px","left":"1px"},"style":"solid","color":{"light":"#9e9e9e","raw":"var(--bricks-color-grey-500)","id":"616a31"},"radius":{"top":"var(--border-radius)","right":"var(--border-radius)","bottom":"var(--border-radius)","left":"var(--border-radius)"}},"icon":{"height":"20","width":"20","svg":{"id":1783,"icon_id":"icon_95c7a8dfu","url":"https://avangtheme.ir/wp-content/uploads/2025/02/close.svg"}},"_typography":{"font-size":"16px"},"filterInputDebounce":"0","filterMinChars":"1","searchCriteriaCustom":true,"searchPostFields":true,"searchPostQuery":[{"id":"ditklb","field":"title"}],"_background":{"color":{"raw":"#ffffff"}},"placeholderTypography":{"color":{"id":"rwhvka","raw":"var(--text-1)","light":"#1f2328"}}},"label":"Search input","themeStyles":[]},{"id":"dxunyr","name":"icon","parent":"lhnaiz","children":[],"settings":{"_position":"absolute","icon":{"fill":{"id":"ligytl","raw":"var(--text-1)","light":"#1f2328"},"library":"themify","icon":"ti-search"},"_left":"15","iconSize":"30"},"label":"Search Icon","themeStyles":[]},{"id":"eporky","name":"block","parent":"heyfja","children":["aupoye"],"settings":{"_direction":"column","_rowGap":"15","_padding":{"right":"15","left":"15","bottom":"15","top":"15"},"_interactions":[{"id":"cfhwnp","trigger":"ajaxStart","ajaxQueryId":"aupoye","action":"hide"},{"id":"ehxbnp","trigger":"ajaxEnd","ajaxQueryId":"aupoye","action":"show"}],"_border":{"radius":{"top":"var(--border-radius)","right":"var(--border-radius)","bottom":"var(--border-radius)","left":"var(--border-radius)"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"light":"#9e9e9e","raw":"var(--bricks-color-grey-500)","id":"616a31"}},"_position":"absolute","_background":{"color":{"raw":"#ffffff"}},"_zIndex":"9","_top":"70"},"label":"Search Result"},{"id":"aupoye","name":"block","parent":"eporky","children":["ytgaex","muelrp"],"settings":{"hasLoop":true,"query":{"is_live_search_wrapper_selector":"#brxe-eporky","ajax_loader_selector":"#brxe-mdwced","is_live_search":true,"post_type":["product"],"no_results_template":"2164","posts_per_page":"5","disable_update_post_term_cache":true,"disable_update_post_meta_cache":true,"no_found_rows":true},"_direction":"row","_columnGap":"10","link":{"type":"meta","useDynamicData":"{post_url}"},"tag":"a","_alignItems":"center","_border":{"width":{"bottom":"1"},"style":"solid","color":{"light":"#9e9e9e","raw":"var(--bricks-color-grey-500)","id":"616a31"}},"_padding":{"bottom":"15"}},"label":"Search item","selectors":[{"id":"wtpvvl","selector":":last-child","settings":{"_padding":{"bottom":"0"},"_border":{"style":"none"}}}]},{"id":"ytgaex","name":"icon","parent":"aupoye","children":[],"settings":{"icon":{"fill":{"id":"ligytl","raw":"var(--text-1)","light":"#1f2328"},"svg":{"id":2092,"icon_id":"icon_tgri4qbhs","url":"https://avangtheme.ir/wp-content/uploads/2025/03/search.svg"},"library":"custom_set_hbu7vqm9q"}},"label":"Term icon","themeStyles":[]},{"id":"muelrp","name":"text-basic","parent":"aupoye","children":[],"settings":{"tag":"span","text":"{post_title}"},"label":"Term name"},{"id":"oepgyb","name":"container","parent":"lwvqch","children":["heyfja"],"settings":{"_rowGap":"10"}},{"id":"heyfja","name":"block","parent":"oepgyb","children":["lhnaiz","eporky"],"settings":{"_position":"relative"},"label":"Wrapper"}],"source":"bricksCopiedElements","sourceUrl":"https://try.bricksbuilder.io/t4ccb117","version":"2.3.4"}

[timmse]

Hi Victor,
What is the purpose of those ajax start/end interactions? The live search container only appears when you search either way Try removing the interactions and see if that solves your problem.

[Victor1999]

Hi @timmse,

You’re right. It’s better not to have two interactions. But if there aren’t, the default behavior would be a bit awkward. Because as you can see in the video below, Bricks displays the search results section immediately after typing the first term. When it makes sense to display it when the results are ready (Ajax end).

As you can see at the beginning of the video below, after typing the first phrase, the search results container appears, but it is empty, and then the search results appear. The main problem occurs here. At 8 seconds into the video, when I cleared the phrase and searched for a new phrase, the previous search results were displayed first, and then the new results appeared. The same thing happened at 15 seconds.

Actually, these two interactions help solve these problems. But I hope it can be solved by default in Bricks.

Live search.mp4

[itchycode]

Hi @Victor1999 ,

I just checked your setup.

1. I’m not able to reproduce the display: block behavior from your screenshot by using your copied json data. Most likely this comes from the Show/Hide element interactions. Bricks will apply display: block / display: none dynamically after styles are computed (if the element still doesn’t show as expected). You can avoid this by using Set attribute / Remove attribute to toggle a custom class (e.g. one that applies display: none) as a workaround.

2. Yes, Live search wrapper will be showing once your input fulfils the “min character” setting directly because there are multiple scenarios that need to be considered. (Like typing /amending the search term while AJAX is in the middle of executing, etc) To address this for better UX, you can add a basic text element to indicate “Searching …” by using Query AJAX loader (Start) and Query Ajax loader (End) (set display:none as default style) interaction similar to your 1st approach.

Example:

Regards,
Jenn

[Victor1999]

Thank you @itchycode,

Sorry @itchycode. Is there any documentation on how we can have a button to show all results when search criteria is enabled? Like what I asked here?