List.js implementiert für schnelle Suche

main.js

@@ -0,0 +1,21 @@
+var options = {
+  valueNames: [
+    { data: ['series-name'] }
+  ]
+};
+var seriesList = new List('series', options);
+
+var options = {
+  valueNames: [
+    { data: ['movie-name'] }
+  ]
+};
+var movieList = new List('movies', options);
+
+$('.series-search').keyup(function() {
+    seriesList.search($(this).val());
+});
+
+$('.movie-search').keyup(function() {
+    movieList.search($(this).val());
+});

templates/content.php

@@ -1,32 +1,30 @@
-    <div class="container-fluid list">
+    <div id="series" class="container-fluid">
       <h1>Serien</h1>
-      <div class="row">
+      <input class="series-search" placeholder="Suchen" />
+      <div class="row list">
         <?php foreach($this->_['series'] as $series) { ?>
-
-        <div class="col-sm-3">
+        <div class="col-sm-3" data-series-name="<?php echo $series['name']; ?>">
           <div class="image-zoom">
             <a href="<?php echo $GLOBALS['conf']['baseURL']; ?>?view=seasons&seriesID=<?php echo $series['id']; ?>">
               <img class="img-responsive" src="<?php echo $GLOBALS['conf']['baseURL']; ?>img/posters/<?php echo $series['poster']; ?>" alt="<?php echo $series['name']; ?>">
             </a>
           </div>
         </div>
-
-        <?php
-        }
-        ?>
+        <?php } ?>
       </div>
+    </div>
+    <div id="movies" class="container-fluid">
       <h1>Filme</h1>
-      <div class="row">
+      <input class="movie-search" placeholder="Suchen" />
+      <div class="row list">
         <?php foreach($this->_['movies'] as $movie) { ?>
-
-          <div class="col-sm-3">
+          <div class="col-sm-3" data-movie-name="<?php echo $movie['name']; ?>">
             <div class="image-zoom">
               <a href="<?php echo $GLOBALS['conf']['baseURL']; ?>?view=movie&movieID=<?php echo $movie['id']; ?>">
                 <img class="img-responsive" src="<?php echo $GLOBALS['conf']['baseURL']; ?>img/posters/<?php echo $movie['poster']; ?>" alt="<?php echo $movie['name']; ?>">
               </a>
             </div>
           </div>
-
         <?php } ?>
       </div>
     </div>

templates/footer.php

@@ -1,4 +1,6 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
+    <script src="<?php echo $GLOBALS['conf']['baseURL']; ?>list.min.js"></script>
+    <script src="<?php echo $GLOBALS['conf']['baseURL']; ?>main.js"></script>
     </body>
 </html>

templates/header.php

@@ -13,7 +13,7 @@
     <style>
 
       h1 {
-        font-size: 8vh;
+        font-size: 3vw;
       }
 
       #logo {
@@ -83,6 +83,11 @@
         text-align: center;
       }
 
+      .series-search, .movie-search {
+        width: 100%;
+        margin-bottom: 25px;
+      }
+
       @media only screen and (max-width : 480px) {
         .col-sm-3 {
           text-align: center;