{"id":49523,"date":"2025-09-22T14:11:53","date_gmt":"2025-09-22T14:11:53","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=49523"},"modified":"2025-09-22T19:50:50","modified_gmt":"2025-09-22T19:50:50","slug":"how-to-create-ajax-search-in-bricks-builder","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-create-ajax-search-in-bricks-builder\/","title":{"rendered":"How to Create an AJAX Search in Bricks Builder"},"content":{"rendered":"\n

The AJAX Search<\/strong> element can be added to any Bricks <\/em>template, but in this case, we add it to a header. For more information on applying JetPlugins<\/em> to the Bricks<\/em> theme, please see the article “What\u2019s Inside Updated JetPlugins and Bricks Builder Integration?<\/a>“<\/p>\n\n\n\n

Create a Template<\/strong><\/h2>\n\n\n\n
\n

Go to the WordPress Dashboard > Bricks >Templates<\/em><\/strong> tab and press the “Add New Template<\/strong>” button. Here, on the Add New Template<\/strong> page, select the needed option (here, we choose the “Header” option) in the Template type<\/strong> drop-down list. <\/p>\n\n\n\n

After that, insert the template’s title and press the “EDIT WITH BRICKS<\/strong>” button.<\/p>\n\n\n\n

\"creating<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Insert the AJAX Search Element<\/strong><\/h2>\n\n\n\n
\n

Design the template as needed. Next, place the AJAX Search<\/strong> element in the search bar and drag-and-drop it to the desired location.<\/p>\n\n\n\n

\"adding<\/a><\/div>\n\n\n\n

After that, the element will be added with the unrolled settings.<\/p>\n\n\n\n

\"the<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Configure the Settings<\/strong><\/h2>\n\n\n\n
\n

First, we press the “CONTENT<\/strong>” tab and unroll the SEARCH FORM<\/strong> settings. Here, we enable the Show Categories List <\/strong>toggle and set the needed Taxonomy<\/strong> in the drop-down list. <\/p>\n\n\n\n

More details on configuring these settings can be found in the AJAX Search Form Overview<\/strong><\/a>.<\/p>\n\n\n\n

Also, to change and style a text, read the How to Customize the Placeholder Text Shown in the Search Field<\/strong><\/a> tutorial. <\/p>\n\n\n\n

\"search<\/a><\/div>\n\n\n\n

Next, we move to the SEARCH AREA<\/strong> tab and set the required Listing<\/strong> for displaying the search results.<\/p>\n\n\n\n

\"search<\/a><\/div>\n\n\n\n

More details on displaying different types of content are presented in the How to Customize the Content Shown in the Search Results<\/strong><\/a> tutorial.<\/p>\n\n\n\n

Finally, move to the top right corner and press the “Save<\/strong>” icon.<\/p>\n<\/div><\/div>\n\n\n\n

Test the Flow<\/strong><\/h2>\n\n\n\n
\n

Assign the header to a page and move to the front end. Here, type three characters in the corresponding field of the AJAX Search<\/strong> element to find the needed items.<\/p>\n\n\n\n

\"showing<\/a><\/div>\n\n\n\n

In addition, since we enabled the Show Categories List <\/strong>toggle in the AJAX Search<\/strong> element settings, we can set the needed category and select the required item that corresponds to this category.<\/p>\n\n\n\n

\"showing<\/a><\/div>\n<\/div><\/div>\n\n\n\n

That\u2019s it. Now you know how to add the AJAX Search<\/strong> element to the website\u2019s header with the help of the JetSearch <\/em>plugin for WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"

Learn how to configure the AJAX Search element from the JetSearch plugin for Bricks and embed it in the site header. <\/p>\n","protected":false},"author":12,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[584],"yoast_head":"\nHow to Create an AJAX Search in Bricks Builder \u4e00 JetSearch | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to configure the AJAX Search element from the JetSearch plugin for the Bricks Builder and embed it in the WordPress site header. Add an AJAX search functionality without using any code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-create-ajax-search-in-bricks-builder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create an AJAX Search in Bricks Builder \u4e00 JetSearch | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to configure the AJAX Search element from the JetSearch plugin for the Bricks Builder and embed it in the WordPress site header. Add an AJAX search functionality without using any code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-create-ajax-search-in-bricks-builder\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-22T19:50:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/09\/creating-the-bricks-template-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-create-ajax-search-in-bricks-builder\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-create-ajax-search-in-bricks-builder\/\",\"name\":\"How to Create an AJAX Search in Bricks Builder \u4e00 JetSearch | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2025-09-22T14:11:53+00:00\",\"dateModified\":\"2025-09-22T19:50:50+00:00\",\"description\":\"Learn how to configure the AJAX Search element from the JetSearch plugin for the Bricks Builder and embed it in the WordPress site header. Add an AJAX search functionality without using any code.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-create-ajax-search-in-bricks-builder\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-create-ajax-search-in-bricks-builder\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-create-ajax-search-in-bricks-builder\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create an AJAX Search in Bricks Builder\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create an AJAX Search in Bricks Builder \u4e00 JetSearch | Crocoblock","description":"Learn how to configure the AJAX Search element from the JetSearch plugin for the Bricks Builder and embed it in the WordPress site header. Add an AJAX search functionality without using any code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-create-ajax-search-in-bricks-builder\/","og_locale":"en_US","og_type":"article","og_title":"How to Create an AJAX Search in Bricks Builder \u4e00 JetSearch | Crocoblock","og_description":"Learn how to configure the AJAX Search element from the JetSearch plugin for the Bricks Builder and embed it in the WordPress site header. Add an AJAX search functionality without using any code.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-create-ajax-search-in-bricks-builder\/","og_site_name":"Help Center","article_modified_time":"2025-09-22T19:50:50+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/09\/creating-the-bricks-template-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-create-ajax-search-in-bricks-builder\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-create-ajax-search-in-bricks-builder\/","name":"How to Create an AJAX Search in Bricks Builder \u4e00 JetSearch | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2025-09-22T14:11:53+00:00","dateModified":"2025-09-22T19:50:50+00:00","description":"Learn how to configure the AJAX Search element from the JetSearch plugin for the Bricks Builder and embed it in the WordPress site header. Add an AJAX search functionality without using any code.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-create-ajax-search-in-bricks-builder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-create-ajax-search-in-bricks-builder\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsearch\/how-to-create-ajax-search-in-bricks-builder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create an AJAX Search in Bricks Builder"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/49523"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/12"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=49523"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=49523"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=49523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}