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

8 files changed, 52 insertions, 17 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());
 });
 
 /**
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 78cf2c056fe..1f35f44e1e7 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -1102,5 +1102,16 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
     </t>
 </template>
 
+<template id="website_search_box" name="Website Searchbox">
+    <div class="input-group">
+        <div class="oe_search">
+            <input type="text" name="search" class="search-query form-control oe_search_box" placeholder="Search..." t-att-value="search" />
+            <span class="fa fa-remove fa-lg oe_search_clear"></span>
+        </div>
+        <span class="input-group-btn">
+           <button type="submit" class="btn btn-default oe_search_button"><i class="fa fa-search"/></button>
+        </span>
+    </div>
+</template>
      </data>
 </openerp>
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index 781a64f96d3..b333b9b55a4 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -87,12 +87,7 @@
                         </li>
                         <li>
                             <form class="navbar-form" role="search" t-attf-action="/forum/#{ slug(forum) }" method="get">
-                                <div class="input-group">
-                                    <input type="search" class="form-control" name="search" t-att-value="search or ''"/>
-                                    <span class="input-group-btn">
-                                        <button type="submit" class="btn btn-default">Search</button>
-                                    </span>
-                                </div>
+                                <t t-call="website.website_search_box"/>
                                 <span class="dropdown" groups="base.group_erp_manager">
                                     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
                                         <i class="fa fa-cog"/>
diff --git a/addons/website_membership/controllers/main.py b/addons/website_membership/controllers/main.py
index 86671eef303..7350f0cdae8 100644
--- a/addons/website_membership/controllers/main.py
+++ b/addons/website_membership/controllers/main.py
@@ -33,7 +33,7 @@ class WebsiteMembership(http.Controller):
         country_obj = request.registry['res.country']
         membership_line_obj = request.registry['membership.membership_line']
         partner_obj = request.registry['res.partner']
-        post_name = post.get('name', '')
+        post_name = post.get('search') or post.get('name', '')
         current_country = None
 
         # base domain for groupby / searches
diff --git a/addons/website_membership/views/website_membership.xml b/addons/website_membership/views/website_membership.xml
index cd1a309b3ef..8ea67e2ad91 100644
--- a/addons/website_membership/views/website_membership.xml
+++ b/addons/website_membership/views/website_membership.xml
@@ -45,9 +45,9 @@
                        <t t-set="classname">pull-left</t>
                     </t>
                     <form action="" method="get" class="navbar-search pull-right pagination form-inline">
-                        <div class="form-group">
-                            <input type="text" name="name" class="search-query col-md-2 mt4 form-control" placeholder="Search" t-att-value="post.get('name', '')"/>
-                        </div>
+                        <t t-call="website.website_search_box">
+                            <t t-set="search" t-value="post.get('search', '')"/>
+                        </t>
                     </form>
                 </div>
                 <div>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 077dbfa5bc0..ca8b1922611 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -43,13 +43,7 @@
         <input type="hidden" name="attrib" t-att-value="'%s-%s' % (a[0], a[1])"/>
       </t>
     </t>
-    <div class="input-group">
-      <input type="text" name="search" class="search-query form-control" placeholder="Search..." t-att-value="search"/>
-      <span class="input-group-btn">
-        <a class="btn btn-default a-submit"><i class="fa fa-search"/></a>
-      </span>
-  </div>
-
+    <t t-call="website.website_search_box"/>
   </form>
 </template>