myok12 · zyahav · Jan 15, 2017 · Jan 16, 2017 · Jan 16, 2017 · Jan 16, 2017
diff --git a/ex10/getSuggestions.js b/ex10/getSuggestions.js
@@ -0,0 +1,12 @@
+define(function() {
+  return function (url, callback) {
+    $.ajax({
+      url: url, 
+      method: 'GET',
+      error: function(error) { alert('an error' + error); },
+      success: function(data) {
+        callback(JSON.parse(data)); 
+      }
+    });
+  }
+});
diff --git a/ex10/index.html b/ex10/index.html
@@ -0,0 +1,18 @@
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+  <title>Suggestions</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+  <link rel="stylesheet" href="style.css" type="text/css"> 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+  <script src="search.js"></script>
+</head>
+<body>
+  <div>
+  <input type="text" class="input">
+  <ol class="hide">
+  </ol>
+ </div>
+</body>
+</html>
diff --git a/ex10/js.js b/ex10/js.js
@@ -0,0 +1,19 @@
+requirejs(['render','getSuggestions'], function(render,getSuggestions) {
+
+  var toggleSuggestions = _.debounce(function() {
+    if ($( '.input' ).val() === '') {
+      // User deleted all input so we hide suggestions
+      render.hideSuggestions();
+    } else {
+      // User need same suggestions so lets get same and show it
+      var q = $( '.input' ).val();
+      getSuggestions('http://localhost:8000/?q=' + q, render.showSuggestions);
+    }
+  }, 500); 
+
+  $(function() {
+    $( '.input' ).on('input', function() { 
+      toggleSuggestions();
+    });
+  });
+});
diff --git a/ex10/render.js b/ex10/render.js
@@ -0,0 +1,20 @@
+define(function() {
+  // Call me with no data to hide suggestion box
+  // otherwise i will render "data", (show suggestions)
+  return {
+    showSuggestions: function(data) {
+      if (data.length >= 1) {
+        $( 'li' ).remove();
+        for (var i = 0; i < data.length; ++i) {
+          $( 'ol' ).append( '<li>' + data[i] + '</li>');
+        }
+        $( 'ol' ).removeClass( "hide" );
+       } else {
+        $( 'ol' ).addClass( "hide" );
+       }
+    },
+    hideSuggestions: function() {
+      $( 'ol' ).addClass( "hide" );
+    }
+  }
+});
diff --git a/ex10/search.js b/ex10/search.js
@@ -0,0 +1,42 @@
+var search = {
+  toggleSuggestions: _.debounce(function() {
+    if ($( '.input' ).val() === '') {
+      // User deleted all input so we hide suggestions
+      search.hideSuggestions();
+    } else {
+      // User need same suggestions so lets get same and show it
+      var query = $( '.input' ).val();
+      search.getSuggestions(query , search.showSuggestions);
+    }
+  }, 500) ,
+  showSuggestions: function(data) {
+    $( 'li' ).remove();
+    for (var i = 0; i < data.length; ++i) {
+      $( 'ol' ).append( '<li>' + data[i] + '</li>');
+    }
+    $( 'ol' ).removeClass( "hide" );
+  },
+  hideSuggestions: function() {
+    $( 'ol' ).addClass( "hide" );
+  },
+  getSuggestions: function(query, callback) {
+    $.ajax({
+      url: 'http://localhost:8000/?q=' + query, 
+      method: 'GET',
+      error: function(error) { alert('an error' + error); },
+      success: function(data) {
+        if (data.length >= 1) {
+          callback(JSON.parse(data)); 
+        } else {
+          search.hideSuggestions();
+        }       
+      }
+    });
+  }
+};
+
+$(function() {
+  $( '.input' ).on('input', function() { 
+    search.toggleSuggestions();
+  });
+});
diff --git a/ex10/style.css b/ex10/style.css
@@ -0,0 +1,33 @@
+div {
+  margin: 10px;
+}
+
+.input {
+  width: 250px;
+  border: 0 solid black;
+  border-width: 1px;
+}
+
+.hide {
+  display: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+ol {
+  width: 250px; 
+  border: 1px solid black;
+  border-width: 1px;
+}
+
+li {
+  border-bottom: 1px dashed black;
+}
+
+li:nth-last-child(-n+1) {
+ border-bottom: none; 
+}
+
+