Added search filters to "Learning Objectives and Criteria" and "Learning Outcomes and Criteria"

app/views/global/view-learning-outcomes-criteria.blade.php

@@ -13,10 +13,35 @@
 @stop
 
 @section('main')
+  {{-- TODO: look where to place this script.
+          if placed inside .ready() or before it,
+            an error that the function is not defined occurs. --}}
+  {{-- TODO: no reconoce acentos --}}
+  <script type="text/javascript">
+  function filterOutcomes() {
+    // Declare variables
+    var input, filter, div, li, i, outcomeText;
+    input = document.getElementById('userInput');
+    filter = input.value.toUpperCase();
+    div = document.getElementById("list");
+    li = div.getElementsByTagName('li');
+
+    // Loop through all list items, and hide those who don't match the search query
+    for (i = 0; i < li.length; i++) {
+      outcomeText = li[i].textContent;
+      if (outcomeText.toUpperCase().indexOf(filter) > -1) {
+        li[i].style.display = "";
+      } else {
+        li[i].style.display = "none";
+      }
+    }
+  }
+  </script>
 
   <div class="row">
     <div class="col-md-3">
-      <div class="list-group">
+      <input class="form-control" type="text" id="userInput" onkeyup="filterOutcomes()" placeholder="Search for Learning Outcomes..">
+      <div class="list-group" id='list'>
         @foreach ($outcomes as $outcome)
           @foreach ($semesters as $semester)
             @if(!$outcome->deleted_at && $outcome->activation_date >= $semester->start && $outcome->activation_date <= $semester->end)

app/views/global/view-objectives-criteria.blade.php

@@ -13,10 +13,35 @@
 @stop
 
 @section('main')
+  {{-- TODO: look where to place this script.
+          if placed inside .ready() or before it,
+            an error that the function is not defined occurs. --}}
+  {{-- TODO: no reconoce acentos --}}
+  <script type="text/javascript">
+  function filterObjectives() {
+    // Declare variables
+    var input, filter, div, li, i, objectiveText;
+    input = document.getElementById('userInput');
+    filter = input.value.toUpperCase();
+    div = document.getElementById("list");
+    li = div.getElementsByTagName('li');
+
+    // Loop through all list items, and hide those who don't match the search query
+    for (i = 0; i < li.length; i++) {
+      objectiveText = li[i].textContent;
+      if (objectiveText.toUpperCase().indexOf(filter) > -1) {
+        li[i].style.display = "";
+      } else {
+        li[i].style.display = "none";
+      }
+    }
+  }
+  </script>
 
   <div class="row">
     <div class="col-md-3">
-      <div class="list-group">
+      <input class="form-control" type="text" id="userInput" onkeyup="filterObjectives()" placeholder="Search for Learning Outcomes..">
+      <div class="list-group" id='list'>
         @foreach ($objectives as $objective)
           <li data-objective-id="{{ $objective->id }}"class="list-group-item">{{ $objective->text }}</li>
         @endforeach