[IMPROVEMENT] Implementing client side search suggestion filtering.

client/javascript/extensible-search-suggestions.js

@@ -1,10 +1,24 @@
 ;(function($) {
 	$(function() {
 
-		// Bind autocomplete to the search form.
+		// Bind autocomplete to the primary search form.
 
-		var search = $('input.extensible-search');
+		var search = $('input.extensible-search:first');
 		if(search.length) {
+
+			// Retrieve the search suggestions that have been approved.
+
+			var suggestions = [];
+			$.get('extensible-search-api/getPageSuggestions', {
+				page: search.data('extensible-search-page')
+			})
+			.done(function(data) {
+
+				suggestions = data;
+			});
+
+			// Initialise the autocomplete.
+
 			search.autocomplete({
 
 				// Determine whether to disable search suggestions, based on configuration.
@@ -15,20 +29,33 @@
 
 				minLength: 3,
 
-				// Retrieve the most relevant search suggestions that have been approved.
+				// Determine the most relevant search suggestions that have been approved.
 
 				source: function(request, response) {
 
-					$.get('extensible-search-api/getSuggestions', {
-						term: request.term,
-						page: search.data('extensible-search-page')
-					})
-					.done(function(data) {
+					// Perform client side filtering, which provides a massive performance increase!
 
-						response(data);
+					var term = search.val();
+					var options = [];
+					$.each(suggestions, function() {
+
+						if(term === this.substr(0, term.length)) {
+							options.push({
+								'label': term + '<strong>' + this.substr(term.length) + '</strong>',
+								'value': this
+							});
+						}
 					});
+					response(options);
 				}
-			});
+			})
+
+			// This needs to render HTML.
+
+			.data('ui-autocomplete')._renderItem = function(ul, item) {
+
+				return $('<li>').append($('<div>').html(item.label)).appendTo(ul);
+			}
 		}
 
 	});

src/controllers/ExtensibleSearchAPI.php

@@ -22,8 +22,8 @@ class ExtensibleSearchAPI extends Controller {
 
 	private static $allowed_actions = array(
 		'toggleSuggestionApproved',
-		'getSuggestions',
-		'getPageSuggestions'
+		'getPageSuggestions',
+		'getSuggestions'
 	);
 
 	/**
@@ -59,17 +59,16 @@ public function toggleSuggestionApproved($request) {
 	}
 
 	/**
-	 *	Retrieve the most relevant search suggestions that have been approved.
+	 *	Retrieve the search suggestions that have been approved (great for client side filtering).
 	 *
-	 *	@URLparameter term <{SEARCH_TERM}> string
 	 *	@URLparameter page <{EXTENSIBLE_SEARCH_PAGE_ID}> integer
 	 *	@return JSON
 	 */
 
-	public function getSuggestions($request) {
+	public function getPageSuggestions($request) {
 
 		if(Config::inst()->get(ExtensibleSearchSuggestion::class, 'enable_suggestions')) {
-			$suggestions = $this->service->getSuggestions($request->getVar('term'), $request->getVar('page'));
+			$suggestions = $this->service->getPageSuggestions($request->getVar('page'));
 
 			// Return the search suggestions as JSON.
 
@@ -85,16 +84,17 @@ public function getSuggestions($request) {
 	}
 
 	/**
-	 *	Retrieve the search suggestions for a page that have been approved (great for client side filtering).
+	 *	Retrieve the most relevant search suggestions that have been approved.
 	 *
+	 *	@URLparameter term <{SEARCH_TERM}> string
 	 *	@URLparameter page <{EXTENSIBLE_SEARCH_PAGE_ID}> integer
 	 *	@return JSON
 	 */
 
-	public function getPageSuggestions($request) {
+	public function getSuggestions($request) {
 
 		if(Config::inst()->get(ExtensibleSearchSuggestion::class, 'enable_suggestions')) {
-			$suggestions = $this->service->getPageSuggestions($request->getVar('page'));
+			$suggestions = $this->service->getSuggestions($request->getVar('term'), $request->getVar('page'));
 
 			// Return the search suggestions as JSON.
 

src/services/ExtensibleSearchService.php

@@ -145,6 +145,39 @@ public function toggleSuggestionApproved($ID) {
 		}
 	}
 
+	/**
+	 *	Retrieve the search suggestions for a page.
+	 *
+	 *	@parameter <{EXTENSIBLE_SEARCH_PAGE_ID}> integer
+	 *	@parameter <{LIMIT}> integer
+	 *	@parameter <{APPROVED_ONLY}> boolean
+	 *	@return array
+	 */
+
+	public function getPageSuggestions($pageID, $limit = 0, $approved = true) {
+
+		// Make sure the current user has appropriate permission.
+
+		$pageID = (int)$pageID;
+		if(($page = ExtensibleSearchPage::get_by_id(ExtensibleSearchPage::class, $pageID)) && $page->canView()) {
+
+			// Retrieve the search suggestions.
+
+			$suggestions = ExtensibleSearchSuggestion::get()->filter(array(
+				'Approved' => (int)$approved,
+				'ExtensibleSearchPageID' => $pageID
+			))->sort('Frequency', 'DESC');
+			if($limit) {
+				$suggestions = $suggestions->limit($limit);
+			}
+
+			// Make sure the search suggestions are unique.
+
+			return array_unique($suggestions->column('Term'));
+		}
+		return array();
+	}
+
 	/**
 	 *	Retrieve the most relevant search suggestions.
 	 *
@@ -182,37 +215,4 @@ public function getSuggestions($term, $pageID, $limit = 5, $approved = true) {
 		return array();
 	}
 
-	/**
-	 *	Retrieve the search suggestions for a page.
-	 *
-	 *	@parameter <{EXTENSIBLE_SEARCH_PAGE_ID}> integer
-	 *	@parameter <{LIMIT}> integer
-	 *	@parameter <{APPROVED_ONLY}> boolean
-	 *	@return array
-	 */
-
-	public function getPageSuggestions($pageID, $limit = 0, $approved = true) {
-
-		// Make sure the current user has appropriate permission.
-
-		$pageID = (int)$pageID;
-		if(($page = ExtensibleSearchPage::get_by_id(ExtensibleSearchPage::class, $pageID)) && $page->canView()) {
-
-			// Retrieve the search suggestions.
-
-			$suggestions = ExtensibleSearchSuggestion::get()->filter(array(
-				'Approved' => (int)$approved,
-				'ExtensibleSearchPageID' => $pageID
-			))->sort('Frequency', 'DESC');
-			if($limit) {
-				$suggestions = $suggestions->limit($limit);
-			}
-
-			// Make sure the search suggestions are unique.
-
-			return array_unique($suggestions->column('Term'));
-		}
-		return array();
-	}
-
 }