use new typeahead search using json objects

styles/bootstrap/application.js

@@ -96,39 +96,85 @@ $(document).ready( function() {
 		}
 	}); /* }}} */
 
-	/* The typeahead functionality useѕ the rest api */
+	/* The typeahead functionality useѕ the modified version of
+	 * bootstrap-typeahead, which is able to set the render function.
+	 * This was needed because the search function return json objects
+	 * for each hit and render could only process strings.
+	 * */
 	$("#searchfield").typeahead({ /* {{{ */
 		minLength: 3,
+		items: 100, /* the query will limit the number of hits */
 		source: function(query, process) {
 			var d = new Date();
 			var pastYear = d.getFullYear() - 1;
 			d.setFullYear(pastYear);
-			console.log(d.toISOString().split('T')[0]);
+//			console.log(d.toISOString().split('T')[0]);
 
-			$.get('../restapi/index.php/search', { query: query, limit: 8, mode: 'typeahead' }, function(data) {
+//			$.get('../restapi/index.php/search', { query: query, limit: 8, mode: 'typeahead' }, function(data) {
-//			$.get('../out/out.Search.php', { query: query, limit: 8, creationdate: 1, createstart: d.toISOString().split('T')[0], action: 'typeahead' }, function(data) {
+			var data = {
+				query: query,
+				limit: 18,
+//				fullsearch: 1,
+//				creationdate: 1,
+//				createstart: d.toISOString().split('T')[0],
+				action: 'typeahead'
+			};
+			/* Return a list of json objects, each containing
+			 * type: type of object (D=doc, F=folder, S=searchterm)
+			 * name: name of object
+			 */
+			$.get('../out/out.Search.php', data, function(data) {
 				process(data);
 			});
 		},
 		/* updater is called when the item in the list is clicked. It is
 		 * actually provided to update the input field, but here we use
-		 * it to set the document location. */
+		 * it to set the document location. The passed value is the string
+		 * set in data-value of the list items. */
 		updater: function (item) {
-			document.location = "../out/out.Search.php?query=" + encodeURIComponent(item.substring(1));
+			console.log(item);
+			document.location = "../out/out.Search.php?query=" + encodeURIComponent(item);
 			return item;
 		},
-		/* Set a matcher that allows any returned value */
+		sorter: function(items) {
+			return items;
+		},
+		/* matcher will always return true, because the initial search returns
+		 * matches only
+  	 */
 		matcher : function (item) {
 			return true;
 		},
 		highlighter : function (item) {
-			if(item.charAt(0) == 'D')
+			if(item.type.charAt(0) == 'D')
-				return '<i class="fa fa-file"></i> ' + item.substring(1).replace(/</g, '&lt;');
+				return '<i class="fa fa-file"></i> ' + item.name.replace(/</g, '&lt;');
-			else if(item.charAt(0) == 'F')
+			else if(item.type.charAt(0) == 'F')
-				return '<i class="fa fa-folder-o"></i> ' + item.substring(1).replace(/</g, '&lt;');
+				return '<i class="fa fa-folder-o"></i> ' + item.name.replace(/</g, '&lt;');
 			else
-				return '<i class="fa fa-search"></i> ' + item.substring(1).replace(/</g, '&lt;');
+				return '<i class="fa fa-search"></i> ' + item.name.replace(/</g, '&lt;');
+		},
+		/* This only works with a modified version of bootstrap typeahead located
+		 * in boostrap-typeahead.js Search for 'render'
+		 * The line
+		 * this.render = this.options.render || this.render
+		 * was added to bootstrap-typeahead.js
+		 * The following function is a copy of the original render function but
+		 * access item.name instead of item
+		 */
+		render : function (items) {
+      var that = this
+
+      items = $(items).map(function (i, item) {
+        i = $(that.options.item).attr('data-value', item.name)
+        i.find('a').html(that.highlighter(item))
+        return i[0]
+      })
+
+      items.first().addClass('active')
+      this.$menu.html(items)
+      return this
     }
+
 	}); /* }}} */
 
 	/* Document chooser */

views/bootstrap/class.Bootstrap.php

@@ -177,6 +177,7 @@ background-image: linear-gradient(to bottom, #882222, #111111);;
 			}
 		}
 		echo '<script src="../styles/'.$this->theme.'/bootstrap/js/bootstrap.min.js"></script>'."\n";
+		echo '<script src="../styles/'.$this->theme.'/bootstrap/js/bootstrap-typeahead.js"></script>'."\n";
 		echo '<script src="../views/'.$this->theme.'/vendors/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>'."\n";
 		foreach(array('de', 'es', 'ar', 'el', 'bg', 'ru', 'hr', 'hu', 'ko', 'pl', 'ro', 'sk', 'tr', 'uk', 'ca', 'nl', 'fi', 'cs', 'it', 'fr', 'sv', 'sl', 'pt-BR', 'zh-CN', 'zh-TW') as $lang)
 			echo '<script src="../views/'.$this->theme.'/vendors/bootstrap-datepicker/locales/bootstrap-datepicker.'.$lang.'.min.js"></script>'."\n";

views/bootstrap/class.Search.php

@@ -74,13 +74,15 @@ class SeedDMS_View_Search extends SeedDMS_Bootstrap_Style {
 		if($entries) {
 			foreach ($entries as $entry) {
 				if($entry->isType('document')) {
-					$recs[] = 'D'.$entry->getName();
+//					$recs[] = 'D'.$entry->getName();
+					$recs[] = array('type'=>'D', 'name'=>$entry->getName());
 				} elseif($entry->isType('folder')) {
-					$recs[] = 'F'.$entry->getName();
+//					$recs[] = 'F'.$entry->getName();
+					$recs[] = array('type'=>'F', 'name'=>$entry->getName());
 				}
 			}
 		}
-		array_unshift($recs, ' '.$query);
+		array_unshift($recs, array('type'=>'S', 'name'=>$query));
 		header('Content-Type: application/json');
 		echo json_encode($recs);
 	} /* }}} */