Glossary: Reuse search widget we use elsewhere

This makes the UI more consistent and moves the search to the top of the
page.

Fixes #3642

weblate/glossary/forms.py

@@ -18,6 +18,7 @@
 #
 
 from crispy_forms.helper import FormHelper
+from crispy_forms.layout import Div, Field, Layout
 from django import forms
 from django.core.exceptions import ValidationError
 from django.utils.translation import gettext_lazy as _
@@ -47,6 +48,20 @@ class OneTermForm(forms.Form):
         label=_("Search"), max_length=GLOSSARY_LENGTH, required=False
     )
 
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+
+        self.helper = FormHelper(self)
+        self.helper.form_tag = False
+        self.helper.disable_csrf = True
+        self.helper.layout = Layout(
+            Div(
+                Field("term", template="snippets/user-query-field.html"),
+                css_class="btn-toolbar",
+                role="toolbar",
+            ),
+        )
+
 
 class GlossaryForm(forms.ModelForm):
     class Meta:

weblate/static/loader-bootstrap.js

@@ -941,7 +941,7 @@ $(function () {
     }
   });
   $(".search-group input")
-    .not("#id_q,#id_position")
+    .not("#id_q,#id_position,#id_term")
     .on("keydown", function (event) {
       if (event.key === "Enter") {
         $(this).closest(".input-group").find(".search-add").click();

weblate/templates/glossary.html

@@ -40,6 +40,11 @@
 
 <div class="tab-content">
 <div class="tab-pane active" id="browse">
+
+<form class="searchform result-page-form" action="{% url 'show_glossary' project=project.slug lang=language.code %}">
+{% crispy searchform %}
+</form>
+
 {% include "paginator.html" %}
 
 <form class="autosubmit form-inline pull-right flip">
@@ -85,10 +90,6 @@
 {% else %}
 <p>{% trans "No words found!" %}</p>
 {% endif %}
-<form class="searchform" action="{% url 'show_glossary' project=project.slug lang=language.code %}">
-{{ searchform | crispy }}
-<button type="submit" class="btn btn-ok"> {% trans "Search" %} </button>
-</form>
 </div>
 
 {% if user_can_add_glossary %}