[ADD] website : generic template for search and add functionality to clear search box

3 files changed, 35 insertions, 0 deletions

diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 872d82b460f..40febaf9b1b 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -1004,4 +1004,18 @@ div.carousel .item.text_only .container > .carousel-image {
   position: inherit;
 }
 
+.oe_search_clear {
+  position: absolute;
+  display:none;
+  cursor: pointer;
+  z-index: 2;
+  right: 42px;
+  color: #939393;
+  padding: 10px 0;
+  top: 1px;
+  }
+
+.oe_search_box {
+    padding-right: 23px;
+}
 /*# sourceMappingURL=website.css.map */
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 223bab94a0b..cb526b29b01 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -799,3 +799,16 @@ div.carousel
 .container
     nav#oe_main_menu_navbar
         position: inherit
+
+.oe_search_clear
+    position: absolute
+    display:none
+    cursor: pointer
+    z-index: 2
+    right: 42px
+    color: #939393
+    padding: 10px 0
+    top: 1px
+
+.oe_search_box
+  padding-right: 23px
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 4972eca41ca..3e0af17b0e2 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -278,6 +278,14 @@ $(document).ready(function () {
     dom_ready.resolve();
     // fix for ie
     if($.fn.placeholder) $('input, textarea').placeholder();
+    $(".oe_search_box").on('input', function() {
+        $(this).next('span').toggle(!!$(this).val());
+    });
+    $(".oe_search_clear").on('click', function() {
+        $(this).prev('input').val('').focus();
+        $(".oe_search_button").trigger("click");
+    });
+    $(".oe_search_clear").toggle(!!$('.oe_search_box').val());
 });
 
 /**