diff --git a/templates/layerindex/classes.html b/templates/layerindex/classes.html
index c513d71..c2cd977 100644
--- a/templates/layerindex/classes.html
+++ b/templates/layerindex/classes.html
@@ -33,10 +33,10 @@
                 <div class="bottom-margin">
                     <form id="filter-form" action="{% url 'class_search' url_branch %}" method="get">
                         <div class="input-group col-md-6">
-                            <input type="text" class="form-control" id="appendedInputButtons" placeholder="Search classes" name="q" value="{{ search_keyword }}" />
+                            <input type="text" class="form-control" id="id_search_text" placeholder="Search classes" name="q" value="{{ search_keyword }}" />
                             <div class="input-group-btn">
                                 <button class="btn btn-default" type="submit" name="search" value="1">search</button>
-                                <button class="btn btn-default" type="submit" name="browse" value="1">browse</button>
+                                <button class="btn btn-default" type="submit" name="browse" value="1" id="id_browse_btn">browse</button>
                             </div>
                         </div>
                     </form>
@@ -84,5 +84,9 @@
         $("#filter-form input:text").first().select().focus();
     });
     {% endif %}
+
+    $("#id_browse_btn").click(function() {
+        $("#id_search_text").val("");
+    });
 </script>
 {% endblock %}
diff --git a/templates/layerindex/distros.html b/templates/layerindex/distros.html
index 880c07a..1d5b1f7 100644
--- a/templates/layerindex/distros.html
+++ b/templates/layerindex/distros.html
@@ -34,10 +34,10 @@
                 <div class="bottom-margin">
                     <form id="filter-form" action="{% url 'distro_search' url_branch %}" method="get">
                         <div class="input-group col-md-6">
-                            <input type="text" class="form-control" id="appendedInputButtons" placeholder="Search distros" name="q" value="{{ search_keyword }}" />
+                            <input type="text" class="form-control" id="id_search_text" placeholder="Search distros" name="q" value="{{ search_keyword }}" />
                             <div class="input-group-btn">
                                 <button class="btn btn-default" type="submit" name="search" value="1">search</button>
-                                <button class="btn btn-default" type="submit" name="browse" value="1">browse</button>
+                                <button class="btn btn-default" type="submit" name="browse" value="1" id="id_browse_btn">browse</button>
                             </div>
                         </div>
                     </form>
@@ -87,5 +87,9 @@
         $("#filter-form input:text").first().select().focus();
     });
     {% endif %}
+
+    $("#id_browse_btn").click(function() {
+        $("#id_search_text").val("");
+    });
 </script>
 {% endblock %}
diff --git a/templates/layerindex/machines.html b/templates/layerindex/machines.html
index 5eee092..41054a3 100644
--- a/templates/layerindex/machines.html
+++ b/templates/layerindex/machines.html
@@ -33,10 +33,10 @@
                 <div class="bottom-margin">
                     <form id="filter-form" action="{% url 'machine_search' url_branch %}" method="get">
                         <div class="input-group col-md-6">
-                            <input type="text" class="form-control" id="appendedInputButtons" placeholder="Search machines" name="q" value="{{ search_keyword }}" />
+                            <input type="text" class="form-control" id="id_search_text" placeholder="Search machines" name="q" value="{{ search_keyword }}" />
                             <div class="input-group-btn">
                                 <button class="btn btn-default" type="submit" name="search" value="1">search</button>
-                                <button class="btn btn-default" type="submit" name="browse" value="1">browse</button>
+                                <button class="btn btn-default" type="submit" name="browse" value="1" id="id_browse_btn">browse</button>
                             </div>
                         </div>
                     </form>
@@ -86,5 +86,9 @@
         $("#filter-form input:text").first().select().focus();
     });
     {% endif %}
+
+    $("#id_browse_btn").click(function() {
+        $("#id_search_text").val("");
+    });
 </script>
 {% endblock %}
diff --git a/templates/layerindex/recipes.html b/templates/layerindex/recipes.html
index cd89fb9..181bdcb 100644
--- a/templates/layerindex/recipes.html
+++ b/templates/layerindex/recipes.html
@@ -35,7 +35,7 @@
                         <div class="form-group" id="searchfield">
                             <div class="controls">
                                 <div class="input-group col-md-6">
-                                    <input type="text" class="form-control" id="appendedInputButtons" placeholder="Search recipes" name="q" value="{{ search_keyword }}" />
+                                    <input type="text" class="form-control" id="id_search_text" placeholder="Search recipes" name="q" value="{{ search_keyword }}" />
                                     <div class="input-group-btn">
                                         <button class="btn btn-default" type="submit">search</button>
                                     </div>
@@ -97,7 +97,7 @@
     });
 
     function validate(){
-        if (!$("#appendedInputButtons").val()){
+        if (!$("#id_search_text").val()){
             $("#errortext").html("<p>Please specify search text</p>");
             $("#searchfield").addClass("has-error");
             return false;