diff --git a/website/public/js/search.js b/website/public/js/search.js
new file mode 100644
index 0000000..b3c322a
--- /dev/null
+++ b/website/public/js/search.js
@@ -0,0 +1,33 @@
+function searchUsers(n, m) {
+    $.post(
+        "API/searchUsers.php",
+        {
+            n: n,
+            m: m,
+            search: $("#search-input").val(),
+            filter: $("#search-filter").val()
+        }
+    ).done(function(data) {
+        console.log(data);
+        if (!showFriends(data, "#search-users-list", 0, "profile.php", "GET")) {
+            $("#search-users-list").text("Niemand gevonden");
+        }
+    });
+}
+
+function searchGroups(n, m) {
+    $.post(
+        "API/searchGroups.php",
+        {
+            n: n,
+            m: m,
+            search: $("#search-input").val(),
+            filter: $("#search-filter").val()
+        }
+    ).done(function(data) {
+        console.log(data);
+        if (!showGroups(data, "#search-groups-list")) {
+            $("#search-groups-list").text("Geen groepen gevonden");
+        }
+    });
+}
\ No newline at end of file
diff --git a/website/public/search.php b/website/public/search.php
index 6cfadd8..fbb0bc2 100644
--- a/website/public/search.php
+++ b/website/public/search.php
@@ -9,6 +9,8 @@
     <style>
         @import url("styles/search.css");
     </style>
+
+    <script src="js/search.js"></script>
 </head>
 <body>
 <?php
diff --git a/website/views/search-view.php b/website/views/search-view.php
index 8d1f0ac..392ea45 100644
--- a/website/views/search-view.php
+++ b/website/views/search-view.php
@@ -37,14 +37,18 @@ $group_count = countSomeGroups($search)->fetchColumn();
                 Zoek:
             </label>
             <input type="text"
+                   id="search-input"
                    name="search"
+                   onkeyup="
+                           searchUsers(<?= $user_n ?>, <?= $user_perpage ?>);
+                           searchGroups(<?= $group_n ?>, <?= $group_perpage ?>);"
                    placeholder="Zoek"
                    value=<?php echo "$search";?>
             >
             <label for="filter">
                 Filter:
             </label>
-            <select name="filter">
+            <select name="filter" id="search-filter">
                 <option value="personal"
                     <?php if ($filter == "personal") echo "selected";?>>
                     Persoonlijk</option>
@@ -79,22 +83,9 @@ $group_count = countSomeGroups($search)->fetchColumn();
         </select>
 
         <ul id='search-users-list' class='nav-list'>
-
             <script>
             $(document).ready(function(){
-                $.post(
-                    "API/searchUsers.php",
-                    {
-                        n: "<?= $user_n ?>",
-                        m: "<?= $user_perpage ?>",
-                        search: "<?= $search ?>",
-                        filter: "<?= $filter ?>"
-                    }
-                ).done(function(data) {
-                    if (!showFriends(data, "#search-users-list", 0, "profile.php", "GET")) {
-                        $("#search-friends-output").append("Niemand gevonden");
-                    }
-                });
+                searchUsers(<?= $user_n ?>, <?= $user_perpage ?>);
             });
             </script>
         </ul>
@@ -122,42 +113,9 @@ $group_count = countSomeGroups($search)->fetchColumn();
         <ul id="search-groups-list" class="nav-list">
             <script>
                 $(document).ready(function(){
-                    $.post(
-                        "API/searchGroups.php",
-                        {
-                            n: "<?= $group_n ?>",
-                            m: "<?= $group_perpage ?>",
-                            search: "<?= $search ?>",
-                            filter: "<?= $filter ?>"
-                        }
-                    ).done(function(data) {
-                        console.log(data);
-                        if (!showGroups(data, "#search-groups-list")) {
-                            $("#search-groups-list").append("Geen groepen gevonden");
-                        }
-                    });
+                    searchGroups(<?= $group_n ?>, <?= $group_perpage ?>);
                 });
             </script>
-        <?php
-//        $q = searchSomeGroups($group_n, $user_perpage, $search);
-//
-//        while ($group = $q->fetch(PDO::FETCH_ASSOC)) {
-//            $groupname = $group['name'];
-//            $grouppic = $group['picture'];
-//
-//            echo("
-//            <a href='https://myhyvesbookplus.nl/group?groupName=$groupname'>
-//                <li class='search-item'>
-//                    <div class='group'>
-//                        <img class='group-picture'
-//                             src='$grouppic'>
-//                        $groupname
-//                    </div>
-//                </li>
-//            </a>
-//            ");
-//        }
-        ?>
         </ul>
     </div>
 </div>
