Updated autocomplete to work in a more understandable way.
Change-Id: I2c4db0e90a46671eb83c7f8b829f57c11f98c323
diff --git a/client/catalog/README.md b/client/catalog/README.md
index ff0d2e9..042551b 100644
--- a/client/catalog/README.md
+++ b/client/catalog/README.md
@@ -16,3 +16,20 @@
+ If it doesn't exist, you will need to copy it from the config-example.json
+ config.json is intentionally left out of the git to prevent overwriting it.
+config.json
+-----------
+
+catalogPrefix - This is where you are doing your catalog queries. This should be the root of where we are querying in ndn.
+
+faceConfig - Configure where you have your backend running and on which port it is listening. To setup a new backend, please read the readme at the root of the repo.
+
+
+Changing the theme
+------------------
+
+Currently the theme is a modified bootstrap theme that is running larger fonts and custom colors.
+
+If you would like to modify the theme go to [this url](http://bootstrap-live-customizer.com/). To modify the current theme, then upload the variables.less in this folder, make your modifications, and overwrite the variables.less file when you are done (and the theme.min.css).
+
+
+
diff --git a/client/catalog/autocomplete.js b/client/catalog/autocomplete.js
index b160dcb..2cda884 100644
--- a/client/catalog/autocomplete.js
+++ b/client/catalog/autocomplete.js
@@ -28,12 +28,6 @@
'top': this.parent().height()
});
-// this.focus(function(){
-// element.slideDown();
-// }).blur(function(){
-// element.slideUp();
-// }).before(element);
-
this.after(element);
var getSuggestions = function(current, callback){
@@ -45,7 +39,10 @@
}, []));
}
+ var lastList = [];
+
var setAutoComplete = function(list){
+ lastList = list;
element.empty();
element.html(list.reduce(function(prev, current){
@@ -60,6 +57,17 @@
var input = this;
+ var matcher = /^\/([-_\w]+\/)*/; //Returns only the absolute path.
+
+ var getValue = function(){
+ var res = matcher.exec(input.val());
+ if (res){
+ return res[0]; //Return the absolute match
+ } else {
+ throw new Error("Empty or incorrectly formatted path.");
+ }
+ }
+
element.bind('click', 'a', function(){
input.val($(this).text());
});
@@ -101,15 +109,30 @@
break;
case 9: //Tab
- getSuggestions(input.val(), setAutoComplete);
+ getSuggestions(getValue(), setAutoComplete);
e.preventDefault(); //Don't print tab or select a different element.
break;
+
+ default:
+ var val = input.val(); //Needs to be unfiltered, for filtering existing results.
+ setAutoComplete(lastList.reduce(function(prev, current){
+ if (current.indexOf(val) === 0){
+ prev.push(current);
+ }
+ return prev;
+ }, []));
+
}
+ })
+ .keyup(function(e){
+ if (e.which === 191){
+ getSuggestions(getValue(), setAutoComplete);
+ }
});
this.on('autoComplete', function(){
- getSuggestions(input.val(), setAutoComplete);
+ getSuggestions(getValue(), setAutoComplete);
});
return this;
diff --git a/client/catalog/catalog.js b/client/catalog/catalog.js
index faac685..691f8ed 100644
--- a/client/catalog/catalog.js
+++ b/client/catalog/catalog.js
@@ -174,7 +174,6 @@
}
Atmos.prototype.autoComplete = function(field, callback){
- console.log("Autocomplete triggered");
if (this.searchInput.val().length === 0 && !filters.hasOwnProperty()){
if (!this.searchBar.hasClass('has-error')){
@@ -192,13 +191,10 @@
var ack = data.getName();
- var name = new Name(scope.catalog).append('query-results').append(JSON.stringify(filters)).append(ack.get(-3)).append(ack.get(-2));
-
- console.log(name.toUri(), filters);
+ var name = new Name(scope.catalog).append('query-results').append(JSON.stringify({"?": field})).append(ack.get(-3)).append(ack.get(-2));
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){
diff --git a/client/catalog/index.html b/client/catalog/index.html
index 7458161..2f3b8c9 100644
--- a/client/catalog/index.html
+++ b/client/catalog/index.html
@@ -43,8 +43,8 @@
<div class="col-sm-3 col-md-2 sidebar">
<div class="panel panel-default">
- <div class="panel-heading flex flex-row">
- <span class="vertical-fix width-fix">Filter Categories</span>
+ <div class="panel-heading">
+ <span>Filter Categories</span>
</div>
<div class="panel-body">
<ul id="side-menu" class="nav nav-pills nav-stacked"></ul>
@@ -70,8 +70,8 @@
<form class="form-inline" id="searchBar">
<div class="form-group">
<div class="input-group">
- <input id="search" placeholder="Enter a path" value="/"
- type="text" class="form-control" data-toggle="tooltip" data-placement="top"
+ <input id="search" placeholder="Enter a path (Ex: /CMIP5)"
+ type="text" class="form-control"
title="This bar is for doing a tab completion like path completion. Press tab, enter, or click AutoComplete to begin your search.">
<div class="input-group-btn">
<button id="autoCompleteSearch" type="submit" class="btn btn-primary">Search</button>
diff --git a/client/catalog/style.css b/client/catalog/style.css
index a9297a2..aa2d1b6 100644
--- a/client/catalog/style.css
+++ b/client/catalog/style.css
@@ -31,27 +31,6 @@
border: none;
}
-.flex {
- display: flex;
-}
-
-.flex-row {
- flex-display: row;
-}
-
-.vertical-fix {
- line-height: 38px; /* Height of the button */
- vertical-align: middle;
-}
-
-.width-fix {
- flex: 1 auto;
-}
-
-.right-fix {
- flex: auto;
-}
-
.pager {
/* margin: 0; */
}