- basic search functionality

public/css/mango.css

@@ -23,3 +23,6 @@
 .uk-logo > img {
 	max-height: 90px;
 }
+.uk-search {
+	width: 100%;
+}

public/js/search.js

@@ -0,0 +1,30 @@
+$(function(){
+	var filter = [];
+	var result = [];
+	$('.uk-card-title').each(function(){
+		filter.push($(this).text());
+	});
+	$('.uk-search-input').keyup(function(){
+		var input = $('.uk-search-input').val();
+		var regex = new RegExp(input, 'i');
+
+		if (input === '') {
+			$('.item').each(function(){
+				$(this).removeAttr('hidden');
+			});
+		}
+		else {
+			filter.forEach(function(text, i){
+				result[i] = text.match(regex);
+			});
+			$('.item').each(function(i){
+				if (result[i]) {
+					$(this).removeAttr('hidden');
+				}
+				else {
+					$(this).attr('hidden', '');
+				}
+			});
+		}
+	});
+});

src/views/index.ecr

@@ -1,8 +1,14 @@
 <h2 class=uk-title>Library</h2>
 <p class="uk-text-meta"><%= titles.size %> titles found</p>
+<div class="uk-margin">
+    <form class="uk-search uk-search-default">
+        <span uk-search-icon></span>
+        <input class="uk-search-input" type="search" placeholder="Search">
+    </form>
+</div>
 <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
   <%- titles.each_with_index do |t, i| -%>
-    <div>
+    <div class="item">
       <a class="acard" href="/book/<%= t.title %>">
         <div class="uk-card uk-card-default">
             <div class="uk-card-media-top">
@@ -18,3 +24,7 @@
     </div>
   <%- end -%>
 </div>
+
+<% content_for "script" do %>
+<script src="/js/search.js"></script>
+<% end %>

src/views/title.ecr

@@ -1,9 +1,15 @@
 <div id="alert"></div>
 <h2 class=uk-title><%= title.title %></h2>
 <p class="uk-text-meta"><%= title.entries.size %> entries found</p>
+<div class="uk-margin">
+    <form class="uk-search uk-search-default">
+        <span uk-search-icon></span>
+        <input class="uk-search-input" type="search" placeholder="Search">
+    </form>
+</div>
 <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
   <%- title.entries.each_with_index do |e, i| -%>
-    <div>
+    <div class="item">
       <a class="acard">
         <div class="uk-card uk-card-default" onclick="showModal('<%= e.title %>', '<%= e.zip_path %>', '<%= e.pages %>', <%= (percentage[i] * 100).round(1) %>, '<%= title.title %>', '<%= e.title %>')">
           <div class="uk-card-media-top">
@@ -44,4 +50,5 @@
 
 <% content_for "script" do %>
 <script src="/js/title.js"></script>
+<script src="/js/search.js"></script>
 <% end %>