diff --git a/ex10/getSuggestions.js b/ex10/getSuggestions.js
new file mode 100644
index 0000000..42c725f
--- /dev/null
+++ 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
new file mode 100644
index 0000000..6bf376c
--- /dev/null
+++ b/ex10/index.html
@@ -0,0 +1,18 @@
+
+
+
+ Suggestions
+
+
+
+
+
+
+
+
+
+
diff --git a/ex10/js.js b/ex10/js.js
new file mode 100644
index 0000000..f5c69b2
--- /dev/null
+++ 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
new file mode 100644
index 0000000..7b52c4a
--- /dev/null
+++ 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( '' + data[i] + '');
+ }
+ $( 'ol' ).removeClass( "hide" );
+ } else {
+ $( 'ol' ).addClass( "hide" );
+ }
+ },
+ hideSuggestions: function() {
+ $( 'ol' ).addClass( "hide" );
+ }
+ }
+});
diff --git a/ex10/search.js b/ex10/search.js
new file mode 100644
index 0000000..1abc5d8
--- /dev/null
+++ 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( '' + data[i] + '');
+ }
+ $( '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
new file mode 100644
index 0000000..aa13dea
--- /dev/null
+++ 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;
+}
+
+