Added Autocomplete Dropdown Search to easily filter CSV Files

css/typeahead.css

@@ -0,0 +1,52 @@
+.typeahead {
+  background-color: #fff;
+}
+
+.typeahead:focus {
+  border: 2px solid #0097cf;
+}
+
+.tt-query {
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.tt-hint {
+  color: #999
+}
+
+.tt-menu {
+  width: 100%;
+  margin: 2px 0;
+  padding: 8px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  box-shadow: 0 5px 10px rgba(0,0,0,.2);
+}
+
+
+.tt-suggestion {
+  padding: 3px 20px;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.tt-suggestion:hover {
+  cursor: pointer;
+  color: #fff;
+  background-color: #0097cf;
+}
+
+.tt-suggestion.tt-cursor {
+  color: #fff;
+  background-color: #0097cf;
+
+}
+
+.tt-suggestion p {
+  margin: 0;
+}

index.html

@@ -4,16 +4,21 @@
     <meta charset="UTF-8">
     <title>Data from Google Trends</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
-    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
-
+    <link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen">
+    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="screen">
+    <link rel="stylesheet" type="text/css" href="css/pikaday.css" media="screen">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
-
+    <link rel="stylesheet" type="text/css" href="css/github-light.css" media="screen">
+    <link rel="stylesheet" type="text/css" href="css/typeahead.css" type='text/css'>
+
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
+
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.3.5/tabletop.min.js"></script>
-    <script src="Pikaday/pikaday.js"></script>
-    <link rel="stylesheet" type="text/css" href="Pikaday/css/pikaday.css" media="screen">
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
+    <script src="js/pikaday.js"></script>
+    <script src="js/typeahead.js"></script>
 
 
 
@@ -22,7 +27,7 @@
     <div class="container">
     <section class="page-header" style="margin-top: 0px; background-image: none; background-color:#fff; color: #444;" height="30px">
       <div class="row" style="width: 585px; margin: auto">
-      <img src="header.png" height=100 width=585/>
+      <img src="img/header.png" height=100 width=585/>
       <h1 class="project-name">Google Trends Datastore</h1>
       <h2 class="project-tagline">Download and play with key datasets from Google Trends, curated by the <b>News Lab at Google</b> team. Click on a CSV name to download it — and let us know what you do with it by emailing us.</h2>
     </div>
@@ -36,9 +41,12 @@ <h2 class="project-tagline">Download and play with key datasets from Google Tren
 
     <section class="main-content">
     <div class="row">
-    	<div class="col-md-4">
-      <label for "subject">Subject:</label><select id="subject"><option value=0>all</option></select>
+
+
+      <div class="col-md-4">
+      <label for "search">Search:</label><input class="typeahead" type="text" placeholder="Subject" id="subject" />
       </div>
+
     	<div class="col-md-2">
 
       <label for "coverage">Coverage:</label><select id="coverage"><option value=0>all</option></select>
@@ -75,10 +83,8 @@ <h2 class="project-tagline">Download and play with key datasets from Google Tren
      <button  type="button" id="go" class="btn btn-default btn-xs" style="margin-left: 20px;">go</button>
      </div>
     </section>
-    <script src="tableload.js"></script>
-    <script type="text/javascript">
-    window.onload = function() {init({key: "1XbUaC5KDd-EMLUOolzj53Sn4sk5P9hL9ZbYxBEchZpY", account: "googletrends", repo: "data"})};
-  </script>
+    <script src="js/tableload.js"></script>
+
     </div>
   </body>
 </html>

tableload.js → js/tableload.js

@@ -1,4 +1,12 @@
 
+$(function() {
+
+var g = ["all"]
+
+init({key: "1XbUaC5KDd-EMLUOolzj53Sn4sk5P9hL9ZbYxBEchZpY", account: "googletrends", repo: "data"})
+
+
+
 function init(params) {
   var key = params.key;
   var account = params.account;
@@ -102,7 +110,7 @@ function init(params) {
       coverageFilter.appendChild(myOption);
     })
 
-    subjectFilter.addEventListener("change", function() {
+  subjectFilter.addEventListener("change", function() {
       var val = subjectFilter.value;
       if (val === "all") {
         delete filters.subject;
@@ -112,6 +120,8 @@ function init(params) {
       filterData();
     })
 
+
+
     coverageFilter.addEventListener("change", function() {
       var val = coverageFilter.value;
       if (val === "all") {
@@ -167,7 +177,24 @@ function init(params) {
   }
 
   function filterData() {
+
     console.log(filters);
+
+    data.forEach(function(d) {
+      d.subject.split(",").forEach(function(item) {
+         if ($.inArray(item.trim(), g) === -1){
+          g.push(item.trim());
+        }
+      });
+
+      d.coverage.split(",").forEach(function(item) {
+        if ($.inArray(item.trim(), g) === -1){
+          g.push(item.trim());
+        }
+      });
+
+    })
+
     currentData = data.filter(function(d) {
       var keep = true;
       Object.keys(filters).some(function(k) {
@@ -235,5 +262,53 @@ function init(params) {
 
 
 
+var substringMatcher = function(strs) {
+  return function findMatches(q, cb) {
+    var matches, substringRegex;
+    matches = [];
+    substrRegex = new RegExp(q, 'i');
+    $.each(strs, function(i, str) {
+      if (substrRegex.test(str)) {
+        matches.push(str);
+      }
+    })
+    cb(matches);
   }
 }
+
+
+
+
+$('#subject').typeahead('destroy');
+var categoryTypeahead =  $('#subject').typeahead({
+  hint: true,
+  highlight: true,
+  minLength: 1,
+   empty : true
+},
+{
+  name: 'data',
+  source: substringMatcher(g)
+}).on('typeahead:selected', onSelected);
+
+
+function onSelected($e, val) {
+    console.log('selected');
+    console.log(val);
+
+    if (val === "all") {
+        delete filters.subject;
+      } else {
+        filters.subject = val;
+      }
+
+    filterData();
+    categoryTypeahead.typeahead('val', '');
+}
+
+
+
+  }
+}
+
+});