eSales Media Git repositories
Browse code

Add search module

Benjamin Roth authored on06/02/2023 12:15:21
Showing1 changed files
contao/templates/mod_alox_jobsearch.html.twig
History View file @7802d83
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,74 @@
1 
+{% extends '@Contao/block_unsearchable' %}
2 
+
3 
+{% block content %}
4 
+    <form{{ formAction is defined ? ' action='~formAction : '' }} class="filter" method="get">
5 
+        <div class="formbody">
6 
+            <input type="hidden" name="FORM_SUBMIT" value="{{ formSubmit }}">
7 
+            <div class="widget widget-text">
8 
+                <input type="text" name="filter_keywords" placeholder="Jobtitel" value="">
9 
+            </div>
10 
+            <div class="widget widget-autocomplete">
11 
+                <input type="hidden" id="filter-city-label-{{ id }}" name="filter_city_label" value="">
12 
+                <select id="filter-city-{{ id }}" name="filter_city" data-placeholder="PLZ/Ort" autocomplete="off">
13 
+                    <option value="">PLZ/Ort</option>
14 
+                </select>
15 
+            </div>
16 
+            <div class="widget widget-text">
17 
+                <input type="text" name="filter_radius" placeholder="Suchradius in km" value="">
18 
+            </div>
19 
+            {% if filterVertragsarten is defined %}
20 
+                <div class="widget widget-select">
21 
+                    <select name="filter_vertragsart">
22 
+                        <option value="">Art der Anstellung</option>
23 
+                        {% for vertragsart in filterVertragsarten %}
24 
+                            <option value="{{ vertragsart.ObjectUuid }}">{{ vertragsart.Bezeichnung }}</option>
25 
+                        {% endfor %}
26 
+                    </select>
27 
+                </div>
28 
+            {% endif %}
29 
+            {% if filterAbteilung is defined %}
30 
+                <div class="widget widget-select">
31 
+                    <select name="filter_abteilung">
32 
+                        <option value="">Unternehmensbereich / Abteilung</option>
33 
+                        {% for abteilung in filterAbteilung %}
34 
+                            <option value="{{ abteilung.ObjectUuid }}">{{ abteilung.Bezeichnung }}</option>
35 
+                        {% endfor %}
36 
+                    </select>
37 
+                </div>
38 
+            {% endif %}
39 
+            <div class="widget widget-submit">
40 
+                <button type="submit">Suchen</button>
41 
+            </div>
42 
+        </div>
43 
+    </form>
44 
+
45 
+    <script>
46 
+        document.addEventListener('DOMContentLoaded', function () {
47 
+            new TomSelect("#filter-city-{{ id }}",{
48 
+                allowEmptyOption: true,
49 
+                create: false,
50 
+                valueField: 'latLon',
51 
+                labelField: 'name',
52 
+                searchField: 'name',
53 
+                load: function(query, callback) {
54 
+                    var url = '_geodb/getLatLon?q=' + encodeURIComponent(query);
55 
+                    fetch(url)
56 
+                        .then(response => response.json())
57 
+                        .then(json => {
58 
+                            callback(json.items);
59 
+                        }).catch(() => {
60 
+                        callback();
61 
+                    });
62 
+                },
63 
+                onChange: function (values) {
64 
+                    let target = document.getElementById('filter-city-label-{{ id }}');
65 
+                    if (target !== undefined && this.activeOption.innerText !== undefined)
66 
+                    {
67 
+                        target.value = this.activeOption.innerText
68 
+                    }
69 
+                }
70 
+            });
71 
+        }, false);
72 
+    </script>
73 
+
74 
+{% endblock %}