{"id":37856,"date":"2014-11-24T10:08:31","date_gmt":"2014-11-24T15:08:31","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=37856"},"modified":"2014-11-24T10:08:31","modified_gmt":"2014-11-24T15:08:31","slug":"js-animated-how-to-activate-search-addon","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-how-to-activate-search-addon.html","title":{"rendered":"JS Animated. How to activate search addon"},"content":{"rendered":"<p>Hello, this tutorial shows how to activate Search Addon in your JS Animated template.<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=zNMpEwoIvjg?width=1280&amp;height=720\" rel=\"prettyPhoto\">JS Animated. How to activate search addon<\/a>\r\n\r\n<p>In some cases you need to activate a search addon on your website. It allow users to find the required information on the website quickly.<\/p>\r\n<p>Attention! Search feature will not work locally. It works only on a hosting-server with PHP enabled.<\/p>\r\n<p><strong>Files needed to work with the form:<\/strong><\/p>\r\n<ul class=\"list\">\r\n<li><p><strong>jquery.js<\/strong> \u2013 jQuery library (the form will work only with this version of library);<\/p><\/li>\r\n<li><p><strong>search.css<\/strong> \u2013 stylesheet file which is being used for the search results pages stylization;<\/p><\/li>\r\n<li><p><strong>search.php<\/strong> \u2013 page where the search results will appear;<\/p><\/li>\r\n<li><p><strong>search.js<\/strong> \u2013 script which is responsible for the search results output in iframe on the page search.php;<\/p><\/li>\r\n<li><p><strong>results.php<\/strong> \u2013 PHP script which actually performs the search.<\/p><\/li>\r\n<\/ul>\r\n<p>In order to activate search addon, you should do the following steps:<\/p>\r\n\r\n<ol>\r\n<li><p>Copy <strong>search<\/strong> folder to the root directory with your *.html files:\r\n  <\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-1-300x140.jpg\" alt=\"JS_Animated.How_to_activate_search_addon-1\" width=\"300\" height=\"140\" class=\"aligncenter size-medium wp-image-37857\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-1-300x140.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-1-150x70.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-1-1024x480.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-1.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n <\/li>\r\n<li>\r\n  <p>Move file <strong>search.php<\/strong> from the search folder to the root directory (with *.html files).  <\/p>\r\n<\/li>\r\n<li>\r\n  <p>Edit your form to define such parameters as: <strong>action=&#8221;search.php&#8221;<\/strong> and <strong>method=&#8221;get&#8221;<\/strong>, also, set parameter for an input: <strong>name=&#8221;s&#8221;<\/strong>:<\/p>\r\n  <pre class=\"brush:html\">\r\n&lt;form id=&quot;search&quot; action=&quot;search.php&quot; method=&quot;GET&quot; accept-charset=&quot;utf-8&quot;&gt;\r\n    &lt;input type=&quot;text&quot; name=&quot;s&quot; \/&gt;\r\n    &lt;a onclick=&quot;document.getElementById('search').submit()&quot;&gt;Search&lt;\/a&gt;\r\n&lt;\/form&gt;\r\n  <\/pre>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-2-300x34.jpg\" alt=\"JS_Animated.How_to_activate_search_addon-2\" width=\"300\" height=\"34\" class=\"aligncenter size-medium wp-image-37858\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-2-300x34.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-2-150x17.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-2.jpg 860w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n\r\n   <p>If you want to change the name of the search form which is <strong>id=&#8221;search&#8221;<\/strong> by default, you should change it on line 3 in the file <strong>search.js<\/strong>, you can find it in <strong>search<\/strong> folder.<\/p>\r\n <\/li>\r\n<li>\r\n    <p>Copy partly header and footer with all the connected scripts in the section <strong>&lt;head&gt;&lt;\/head&gt;<\/strong> to the page <strong>search.php<\/strong>, but necessarily add connection of the file <strong>search.js<\/strong>. For example: \r\n\t<pre class=\"brush:html\">\r\n&lt;link rel=&quot;stylesheet&quot; href=&quot;css\/reset.css&quot; type=&quot;text\/css&quot; media=&quot;all&quot;&gt;\r\n&lt;link rel=&quot;stylesheet&quot; href=&quot;css\/fonts.css&quot; type=&quot;text\/css&quot; media=&quot;all&quot;&gt;\r\n&lt;link rel=&quot;stylesheet&quot; href=&quot;css\/style.css&quot; type=&quot;text\/css&quot; media=&quot;all&quot;&gt;\r\n&lt;script src=&quot;js\/jquery.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script src=&quot;search\/search.js&quot;&gt;&lt;\/script&gt;\r\n\t<\/pre>\r\n\t\r\n<a href=\"\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-3-300x69.jpg\" alt=\"JS_Animated.How_to_activate_search_addon-3\" width=\"300\" height=\"69\" class=\"aligncenter size-medium wp-image-37859\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-3-300x69.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-3-150x34.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-3.jpg 860w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n<\/li>\r\n  <li>\r\n    <p>To show the search results, add the following block to your content:<\/p>\r\n  <pre class=\"brush:html\">\r\n&lt;h3&gt;Search result:&lt;\/h3&gt;\r\n&lt;div id=&quot;search-results&quot;&gt;&lt;\/div&gt;\r\n\t <\/pre>\r\n\t\r\n<a href=\"\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-4-300x168.jpg\" alt=\"JS_Animated.How_to_activate_search_addon-4\" width=\"300\" height=\"168\" class=\"aligncenter size-medium wp-image-37860\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-4-300x168.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-4-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-4-1024x576.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/09\/JS_Animated.How_to_activate_search_addon-4.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n\r\n\t<\/li>\r\n\t<li>\r\n\t<p>Change style of the search results using <strong>search.css<\/strong>.\r\n\t<\/li>\r\n<\/ol>\r\n<p>All the rest main styles of your template will be automatically pulled from the file <strong>style.css<\/strong> by the PHP script.\r\n<\/p>\r\n<p>Now the search addon is activated.<\/p>\r\n\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=zNMpEwoIvjg?width=1280&amp;height=720\" rel=\"prettyPhoto\">JS Animated. How to activate search addon<\/a>","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to activate Search Addon in JS Animated templates.<\/p>\n","protected":false},"author":60,"featured_media":40703,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[1314,1754,1015,631],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/37856"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/60"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=37856"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/37856\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/40703"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=37856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=37856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=37856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}