Finished functionality of autocomplete.
Autocomplete could use some input on what to do when certain buttons
are pressed.
Change-Id: I1b4a9f2e8e7f9526e6d14cfb443e56676ae45576
diff --git a/client/query/autocomplete.js b/client/query/autocomplete.js
index e918390..b160dcb 100644
--- a/client/query/autocomplete.js
+++ b/client/query/autocomplete.js
@@ -23,22 +23,18 @@
var element = $('<div></div>');
element.addClass('list-group')
+ .addClass('autoComplete')
.css({
- 'border-top-left-radius': 0,
- 'border-top-right-radius': 0,
- 'width': this.width(),
- 'position': 'absolute',
- 'top': this.parent().height(),
- 'display': 'none',
- 'max-height': '500px',
- 'overflow-y': 'auto'
+ 'top': this.parent().height()
});
- this.focus(function(){
- element.slideDown();
- }).blur(function(){
- element.slideUp();
- }).before(element);
+// this.focus(function(){
+// element.slideDown();
+// }).blur(function(){
+// element.slideUp();
+// }).before(element);
+
+ this.after(element);
var getSuggestions = function(current, callback){
callback(suggestions.reduce(function(prev, suggestion){
@@ -76,7 +72,8 @@
element.find(':first-child').addClass('active');
} else {
if (!active.is(':first-child')){
- active.removeClass('active').prev().addClass('active');
+ var top = active.removeClass('active').prev().addClass('active').offset().top;
+ active.parent().stop().animate({scrollTop: top}, 500);
}
}
e.preventDefault();
@@ -88,7 +85,8 @@
element.find(':first-child').addClass('active');
} else {
if (!active.is(':last-child')){
- active.removeClass('active').next().addClass('active');
+ var top = active.removeClass('active').next().addClass('active').offset().top;
+ active.parent().stop().animate({scrollTop: top}, 500);
}
}
e.preventDefault();
@@ -104,7 +102,7 @@
case 9: //Tab
getSuggestions(input.val(), setAutoComplete);
- e.preventDefault(); //Don't print tab
+ e.preventDefault(); //Don't print tab or select a different element.
break;
}
diff --git a/client/query/query.js b/client/query/query.js
index af01a58..3993c43 100644
--- a/client/query/query.js
+++ b/client/query/query.js
@@ -201,6 +201,14 @@
scope.face.expressInterest(new Interest(name).setInterestLifetimeMilliseconds(5000),
function(interest, data){
console.log("Autocomplete query return: ", data.getContent().toString());
+
+ if (data.getContent().length !== 0){
+ var options = JSON.parse(data.getContent().toString().replace(/[\n\0]/g, "")).next.map(function(element){
+ return field + element;
+ });
+ callback(options);
+ }
+
}, function(interest){
console.warn("Interest timed out!", interest);
});
diff --git a/client/query/query2.css b/client/query/query2.css
index 2119d4c..a9297a2 100644
--- a/client/query/query2.css
+++ b/client/query/query2.css
@@ -108,3 +108,19 @@
#filters:not(:empty)::before {
content: "Filters: ";
}
+
+#search {
+ width: 500px;
+}
+
+.autoComplete {
+ max-height: 0;
+ overflow-y: auto;
+ position: absolute;
+ left: 0;
+ transition: max-height 1s;
+}
+
+*:focus ~ .autoComplete { /* If the parent detects focus on any subelement or itself */
+ max-height: 500px;
+}