awgcal/search.js at master · civ0/awgcal · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
$(document).ready(function() {

    var jsonData;
    var selectedElement = -1;

    var $input_search = $("input#search");
    var $ul_results = $("ul#results");

    $input_search.keydown(function(e) {
        if (e.keyCode == 13 || e.keyCode == 38 || e.keyCode == 40) {
            e.preventDefault();
        }
    });

    $input_search.keyup(function(e) {
        // Navigation durch Suchergebnisse
        if (e.keyCode == 13 || e.keyCode == 27 || e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40) {
            if (e.keyCode == 13 || e.keyCode == 38 || e.keyCode == 40) {
                e.preventDefault();
            }

            if (e.keyCode == 13) { // Enter
                if (selectedElement == -1 && jsonData.length < 1) {
                    location = jsonData[0].url;
                } else {
                    location = jsonData[selectedElement].url;
                }
                return false;
            }

            if (e.keyCode == 27) { // Esc
                selectedElement = -2;
                jsonData = null;
                $ul_results.fadeOut();
                $ul_results.html("");
            }

            if (selectedElement != -2) { // Nur wenn Suchergebnisse vorhanden sind
                if (e.keyCode == 38 && selectedElement > 0) { // up
                    var element = document.getElementById("el" + selectedElement);
                    element.classList.remove("active");
                    selectedElement--;
                    element = document.getElementById("el" + selectedElement);
                    element.classList.add("active");
                    return false;
                }

                if (e.keyCode == 40 && selectedElement < jsonData.length - 1) { // down
                    if (selectedElement == -1) {
                        var element = document.getElementById("el0");
                        element.classList.add("active");
                        selectedElement = 0;
                    } else {
                        var element = document.getElementById("el" + selectedElement);
                        element.classList.remove("active");
                        selectedElement++;
                        element = document.getElementById("el" + selectedElement);
                        element.classList.add("active");
                    }
                    return false;
                }
            }
        } else { // Suche
            clearTimeout($.data(this, 'timer'));
            var search_string = $(this).val();
            if (search_string == '') {
                $ul_results.fadeOut();
            } else {
                $ul_results.fadeIn();
                $(this).data('timer', setTimeout(search, 100));
            }
        }
    });

    function search() {
        var query_value = $input_search.val();
        if (query_value !== '') {
            $.ajax({
                type: "POST",
                url: "search.php",
                data: {
                    query: query_value
                },
                cache: false,
                success: function(response) {
                    if (response != "") {
                        jsonData = JSON.parse(response);
                        var htmlResult = "";
                        var i;
                        for (i = 0; i < jsonData.length; i++) {
                            htmlResult += "<li class=\"dropdown-item\" id=\"el" + i + "\"><a href=\"" + jsonData[i].url + "\"><p>" + jsonData[i].name + "</p></li>";
                        };
                        $ul_results.html(htmlResult);
                        selectedElement = -1;
                    } else {
                        $ul_results.html("<li class=\"dropdown-item\"><a><p>Keine Suchergebnisse</p></li>");
                        selectedElement = -2;
                    }
                }
            });
        }
        return false;
    }

});