topic Re: Blog search in CMS Development

topic Re: Blog search in CMS Development https://community.hubspot.com/t5/CMS-Development/Blog-search/m-p/641716#M28925 <P>Gabriel messaged me directly but to help others, I think searching on keyup would work e.g.</P> <LI-CODE lang="javascript">const input = document.getElementById('blog-search-input'); input.onkeyup = (e) => { let input_val = this.value; const listSelector = documents.getElementsByClassName('blog-listing-wrapper')[0]; // whatever div wraps your blog listings if (input_val.length > 0) { let request = new XMLHttpRequest(); request.open('GET', "https://api.hubapi.com/contentsearch/v2/search?portalId=[PORTAL ID]&term="+input_val+"&type=BLOG_POST&length=SHORT", true); request.onload = function() { if (this.status >= 200 && this.status < 400) { // Success! let data = JSON.parse(this.response); let results = data.results; let amount = results.length; if (results === undefined || results.length == 0) { listSelector.innerHTML = ""; listSelector.innerHTML += "<p style='margin: 0 auto;'>Sorry, there are no results for that search. Please search something else.</p>" } else { results = Array.from(results); results.forEach(node => { let date = node.publishedDate; let tag = node.tags[0]; // structure this html for each result however you structure your blog listings normally listSelector.innerHTML += "<div class='post-item content-item'><div class='img-wrapper mb-20 blog-featured-image-wrapper blog-search-image'><a href="+ node.url + " class='hs-featured-image-link'><img src="+ node.featuredImageUrl + "></a></div><p id='hubspot-topic_data'>" + tag + "</a>&nbsp;|&nbsp;&nbsp;" + date + "</p><div class='post-header blog-title'><h3 class='h5'><a href="+ node.url + " >"+ node.title + "</a></h3></div><div class=' blog-body clearfix'><p>"+ node.description + "</p></div></div></div>" }); } } else { // We reached our target server, but it returned an error console.log(this.response); listSelector.innerHTML = ""; listSelector.innerHTML += "<p style='margin: 0 auto;'>Sorry, there was an error</p>" } }; request.onerror = function(status, error) { console.log(error); }; request.send(); } }</LI-CODE> Tue, 31 May 2022 09:33:50 GMT piersg 2022-05-31T09:33:50Z Blog search https://community.hubspot.com/t5/CMS-Development/Blog-search/m-p/641040#M28907 <P>Hello, I'm trying to figure out how this blog search might be put together:<BR /><BR /><A href="https://www.safebreach.com/resources/blog/" target="_blank">https://www.safebreach.com/resources/blog/</A><BR /><BR />Basically, after typing your search query, the blog index page should display the articles including the search query.<BR /><BR /></P> Mon, 30 May 2022 07:30:32 GMT https://community.hubspot.com/t5/CMS-Development/Blog-search/m-p/641040#M28907 GabrielPerte 2022-05-30T07:30:32Z Re: Blog search https://community.hubspot.com/t5/CMS-Development/Blog-search/m-p/641198#M28911 <P>Hi <a href="https://community.hubspot.com/t5/user/viewprofilepage/user-id/181999">@GabrielPerte</a>, </P> <P>this can be done via AJAX. So basically you'll need to clone and modify the search module. I think <a href="https://community.hubspot.com/t5/user/viewprofilepage/user-id/103660">@piersg</a> has done something like that in the past</P> <P> </P> <P> </P> <P>best, </P> <P>Anton</P> Mon, 30 May 2022 12:48:28 GMT https://community.hubspot.com/t5/CMS-Development/Blog-search/m-p/641198#M28911 Anton 2022-05-30T12:48:28Z Re: Blog search https://community.hubspot.com/t5/CMS-Development/Blog-search/m-p/641716#M28925 <P>Gabriel messaged me directly but to help others, I think searching on keyup would work e.g.</P> <LI-CODE lang="javascript">const input = document.getElementById('blog-search-input'); input.onkeyup = (e) => { let input_val = this.value; const listSelector = documents.getElementsByClassName('blog-listing-wrapper')[0]; // whatever div wraps your blog listings if (input_val.length > 0) { let request = new XMLHttpRequest(); request.open('GET', "https://api.hubapi.com/contentsearch/v2/search?portalId=[PORTAL ID]&term="+input_val+"&type=BLOG_POST&length=SHORT", true); request.onload = function() { if (this.status >= 200 && this.status < 400) { // Success! let data = JSON.parse(this.response); let results = data.results; let amount = results.length; if (results === undefined || results.length == 0) { listSelector.innerHTML = ""; listSelector.innerHTML += "<p style='margin: 0 auto;'>Sorry, there are no results for that search. Please search something else.</p>" } else { results = Array.from(results); results.forEach(node => { let date = node.publishedDate; let tag = node.tags[0]; // structure this html for each result however you structure your blog listings normally listSelector.innerHTML += "<div class='post-item content-item'><div class='img-wrapper mb-20 blog-featured-image-wrapper blog-search-image'><a href="+ node.url + " class='hs-featured-image-link'><img src="+ node.featuredImageUrl + "></a></div><p id='hubspot-topic_data'>" + tag + "</a>&nbsp;|&nbsp;&nbsp;" + date + "</p><div class='post-header blog-title'><h3 class='h5'><a href="+ node.url + " >"+ node.title + "</a></h3></div><div class=' blog-body clearfix'><p>"+ node.description + "</p></div></div></div>" }); } } else { // We reached our target server, but it returned an error console.log(this.response); listSelector.innerHTML = ""; listSelector.innerHTML += "<p style='margin: 0 auto;'>Sorry, there was an error</p>" } }; request.onerror = function(status, error) { console.log(error); }; request.send(); } }</LI-CODE> Tue, 31 May 2022 09:33:50 GMT https://community.hubspot.com/t5/CMS-Development/Blog-search/m-p/641716#M28925 piersg 2022-05-31T09:33:50Z