OO-990: replace jquery ui autocomplete with typeahead ( which is loaded on demand)

src/main/java/org/olat/core/gui/components/htmlheader/jscss/CustomJSComponent.java

@@ -60,11 +60,7 @@ public class CustomJSComponent extends AbstractComponent {
 		this.jsFilePaths = jsFilePaths;
 	}
 
-	/**
-	 * 
-	 * @see org.olat.core.gui.components.Component#validate(org.olat.core.gui.UserRequest,
-	 *      org.olat.core.gui.render.ValidationResult)
-	 */
+	@Override
 	public void validate(UserRequest ureq, ValidationResult vr) {
 		super.validate(ureq, vr);
 		JSAndCSSAdder jsadder = vr.getJsAndCSSAdder();
@@ -86,5 +82,4 @@ public class CustomJSComponent extends AbstractComponent {
 	public ComponentRenderer getHTMLRendererSingleton() {
 		return RENDERER;
 	}
-
-}
+}
\ No newline at end of file

src/main/java/org/olat/core/gui/components/htmlheader/jscss/CustomJSFormItem.java

+/**
+ * <a href="http://www.openolat.org">
+ * OpenOLAT - Online Learning and Training</a><br>
+ * <p>
+ * Licensed under the Apache License, Version 2.0 (the "License"); <br>
+ * you may not use this file except in compliance with the License.<br>
+ * You may obtain a copy of the License at the
+ * <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache homepage</a>
+ * <p>
+ * Unless required by applicable law or agreed to in writing,<br>
+ * software distributed under the License is distributed on an "AS IS" BASIS, <br>
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. <br>
+ * See the License for the specific language governing permissions and <br>
+ * limitations under the License.
+ * <p>
+ * Initial code contributed and copyrighted by<br>
+ * frentix GmbH, http://www.frentix.com
+ * <p>
+ */
+package org.olat.core.gui.components.htmlheader.jscss;
+
+import org.olat.core.gui.UserRequest;
+import org.olat.core.gui.components.Component;
+import org.olat.core.gui.components.form.flexible.impl.FormItemImpl;
+
+/**
+ * 
+ * Initial date: 21.05.2014<br>
+ * @author srosse, stephane.rosse@frentix.com, http://www.frentix.com
+ *
+ */
+public class CustomJSFormItem extends FormItemImpl {
+	
+	private final CustomJSComponent component;
+	
+	public CustomJSFormItem(String name, String[] jsPath) {
+		super(name);
+		component = new CustomJSComponent(name, jsPath);
+	}
+
+	@Override
+	protected Component getFormItemComponent() {
+		return component;
+	}
+
+	@Override
+	protected void rootFormAvailable() {
+		//
+	}
+
+	@Override
+	public void evalFormRequest(UserRequest ureq) {
+		//
+	}
+
+	@Override
+	public void reset() {
+		//
+	}
+}
\ No newline at end of file

src/main/java/org/olat/core/gui/components/htmlheader/jscss/JSAndCSSComponentRenderer.java

@@ -28,14 +28,7 @@
 */
 package org.olat.core.gui.components.htmlheader.jscss;
 
-import org.olat.core.gui.components.Component;
-import org.olat.core.gui.components.ComponentRenderer;
-import org.olat.core.gui.render.RenderResult;
-import org.olat.core.gui.render.Renderer;
-import org.olat.core.gui.render.RenderingState;
-import org.olat.core.gui.render.StringOutput;
-import org.olat.core.gui.render.URLBuilder;
-import org.olat.core.gui.translator.Translator;
+import org.olat.core.gui.components.DefaultComponentRenderer;
 
 /**
 * Description:<br>
@@ -45,35 +38,6 @@ import org.olat.core.gui.translator.Translator;
 *
 * @author Felix Jost
 */
-public class JSAndCSSComponentRenderer implements ComponentRenderer {
+public class JSAndCSSComponentRenderer extends DefaultComponentRenderer {
 
-	/**
-	 * @see org.olat.core.gui.render.ui.ComponentRenderer#render(org.olat.core.gui.render.Renderer,
-	 *      org.olat.core.gui.render.StringOutput, org.olat.core.gui.components.Component,
-	 *      org.olat.core.gui.render.URLBuilder, org.olat.core.gui.translator.Translator,
-	 *      org.olat.core.gui.render.RenderResult, java.lang.String[])
-	 */
-	public void render(Renderer renderer, StringOutput sb, Component source, URLBuilder ubu, Translator translator,
-			RenderResult renderResult, String[] args) {
-		// nothing to render
-		//throw new OLATRuntimeException(JSAndCSSComponentRenderer.class, "render method should never be called for JsCssComponentRenderer. You must not include this component using $r.render(...) in a velocity page, simply adding it to a container using container.put(\"header\", thiscomponent) will do", null);
-	}
-
-	/**
-	 * @see org.olat.core.gui.render.ui.ComponentRenderer#renderBodyOnLoadJSFunctionCall(org.olat.core.gui.render.Renderer,
-	 *      org.olat.core.gui.render.StringOutput, org.olat.core.gui.components.Component)
-	 */
-	public void renderBodyOnLoadJSFunctionCall(Renderer renderer, StringOutput sb, Component source, RenderingState rstate) {
-		// do nothing
-	}
-
-	/**
-	 * @see org.olat.core.gui.render.ui.ComponentRenderer#renderHeaderIncludes(org.olat.core.gui.render.Renderer,
-	 *      org.olat.core.gui.render.StringOutput, org.olat.core.gui.components.Component,
-	 *      org.olat.core.gui.render.URLBuilder, org.olat.core.gui.translator.Translator)
-	 */
-	public void renderHeaderIncludes(Renderer renderer, StringOutput sb, Component source, URLBuilder ubu, Translator translator,
-			RenderingState rstate) {
-		// do nothing
-	}
 }

src/main/java/org/olat/core/gui/control/generic/ajax/autocompletion/AutoCompleterController.java

@@ -34,6 +34,7 @@ import org.json.JSONObject;
 import org.olat.core.dispatcher.mapper.Mapper;
 import org.olat.core.gui.UserRequest;
 import org.olat.core.gui.components.Component;
+import org.olat.core.gui.components.htmlheader.jscss.CustomJSComponent;
 import org.olat.core.gui.components.velocity.VelocityContainer;
 import org.olat.core.gui.control.Controller;
 import org.olat.core.gui.control.Event;
@@ -110,6 +111,11 @@ public class AutoCompleterController extends BasicController {
 		if (label != null) {
 			myContent.contextPut("autocompleter_label", label);
 		}
+		
+		myContent.put("typeahead", new CustomJSComponent("typeahead", new String[] {
+				"js/jquery/typeahead/typeahead.bundle.js"
+		}));
+		
 		myContent.contextPut("showDisplayKey", Boolean.valueOf(showDisplayKey));
 		myContent.contextPut("inputWidth", Integer.valueOf(inputWidth));
 		myContent.contextPut("minChars", Integer.valueOf(minChars));

src/main/java/org/olat/core/gui/control/generic/ajax/autocompletion/AutoCompleterMapper.java

@@ -45,10 +45,8 @@ public class AutoCompleterMapper implements Mapper {
 		this.gprovider = gprovider;
 	}
 
-	@Override
-	@SuppressWarnings({ "synthetic-access" })			
+	@Override		
 	public MediaResource handle(String relPath, HttpServletRequest request) {
-
 		// Read query and generate JSON result
 		String lastN = request.getParameter(PARAM_QUERY);
 		JSONArray result;
@@ -61,4 +59,4 @@ public class AutoCompleterMapper implements Mapper {
 		}
 		return new JSONMediaResource(result, "UTF-8");
 	}
-}
+}
\ No newline at end of file

src/main/java/org/olat/core/gui/control/generic/ajax/autocompletion/FlexiAutoCompleterController.java

@@ -38,6 +38,7 @@ import org.olat.core.gui.components.form.flexible.FormItemContainer;
 import org.olat.core.gui.components.form.flexible.impl.Form;
 import org.olat.core.gui.components.form.flexible.impl.FormBasicController;
 import org.olat.core.gui.components.form.flexible.impl.FormLayoutContainer;
+import org.olat.core.gui.components.htmlheader.jscss.CustomJSFormItem;
 import org.olat.core.gui.control.Controller;
 import org.olat.core.gui.control.Event;
 import org.olat.core.gui.control.WindowControl;
@@ -146,6 +147,10 @@ public class FlexiAutoCompleterController extends FormBasicController {
 	protected void setupAutoCompleter(UserRequest ureq, FormLayoutContainer layoutCont, String noresults, boolean showDisplayKey, int inputWidth, int minChars, String label) {
 		String noResults = (noresults == null ? translate("autocomplete.noresults") : noresults);
 		// Configure displaying parameters
+		
+		layoutCont.add("typeahead", new CustomJSFormItem("typeahead", new String[] {
+				"js/jquery/typeahead/typeahead.bundle.js"
+		}));
 	
 		if (label != null) {
 			layoutCont.contextPut("autocompleter_label", label);

src/main/java/org/olat/core/gui/control/generic/ajax/autocompletion/_content/autocomplete.html

 <div class="b_form_auto_completer">
 	#if($flexi)
-		<div id="$r.getId("aj_ac_f")">
+		<div id='$r.getId("aj_ac_f")'>
 	#else
-		<form id="$r.getId("aj_ac_f")" action="$r.formURIbg('select')" method="post" $r.bgTarget()>
+		<form id='$r.getId("aj_ac_f")' action="$r.formURIbg('select')" method="post" $r.bgTarget()>
 	#end
     #if ($autocompleter_label)
 		$autocompleter_label 
 	#end
 	<div class="$formElementClass">
-	    <input type="text" size="$inputWidth" name='$r.getId("b_autocomplete_input")' id='$r.getId("b_autocomplete_input")' />
+	    <input type="text" size="$inputWidth" class="form-control" name='$r.getId("b_autocomplete_input")' id='$r.getId("b_autocomplete_input")' />
 	</div>	
 	#if($flexi)
 		</div>
@@ -16,46 +16,42 @@
 		</form>
 	#end
 </div>
-
 <script type="text/javascript">
 /* <![CDATA[ */ 
 jQuery(function(){
-	var myAuto = jQuery('#$r.getId("b_autocomplete_input")').autocomplete({
-		minLength: 3,
-		source: function( request, response ) {
-			jQuery.ajax({
-				url: '$mapuri',
-				data: request,
-				dataType: "json",
-				type: "POST",
-				success: function( data ) {
-					response(jQuery.map( data, function( item ) {
-						return {
-							label: item.value,
-							username: item.displayKey,
-							cssClass: item.cssClass,
-							value: item.key
-						}
-					}));
-				}
-	    });
-	  },
-	  open: function() {
-		  jQuery(this).autocomplete('widget').css('z-index', 10000);
-	  },
-	  select: function( event, ui ) {
-			$r.javaScriptBgCommand("select") + '?key=' + ui.item.value;
-			return false;
+	var fullNameTypeahead = new Bloodhound({
+		datumTokenizer: function (d) {
+			return Bloodhound.tokenizers.whitespace(d.value);
+		},
+		queryTokenizer: Bloodhound.tokenizers.whitespace,
+		remote: {
+			url: '${mapuri}?term=%QUERY',
+			filter: function ( response ) {
+				return jQuery.map(response, function (object) {
+					return {
+						value: '' + object.key,
+						#if($showDisplayKey)
+						fullName: object.displayKey + ": " + object.value
+						#else
+						fullName: object.value
+          				#end
+					};
+				});
+			}
 		}
-	}).__renderItem = function(ul, item) {
-		var itemVal = "<a><div class='b_form_auto_completer_item search-item " + item.cssClass + "'>";
-		#if($showDisplayKey)
-		itemVal += "<span class=\'b_key\'>" + item.username + ": </span>";
-		#end
-		itemVal += "<span class='b_value'>" + item.label + "</span>";
-		itemVal += "</div></a>";
-		return jQuery("<li>").append(itemVal).appendTo(ul);
-	};
+	});
+	fullNameTypeahead.initialize();
+	jQuery('#$r.getId("b_autocomplete_input")').typeahead({
+		hint: false,
+		highlight: false,
+		minLength: 3
+	},{
+		minLength: 3,
+		displayKey: 'fullName',
+		source: fullNameTypeahead.ttAdapter()
+	}).on('typeahead:selected', function (e, object) { 
+		$r.javaScriptBgCommand("select") + '?key=' + object.value;
+	});
 });
 /* ]]> */
 </script>
\ No newline at end of file

src/main/java/org/olat/core/gui/media/JSONMediaResource.java

@@ -63,18 +63,16 @@ public class JSONMediaResource extends DefaultMediaResource {
 		super.prepare(hres);
 		try {
 			hres.setCharacterEncoding(encoding);
-		} catch (Exception e1) {
-			e1.printStackTrace();
+		} catch (Exception e) {
+			log.warn("", e);
 		}
-		
-		
+
 		try {
 			if(jsonObject != null) {
 				jsonObject.write(hres.getWriter());
 			} else if(jsonArray != null) {
 				jsonArray.write(hres.getWriter());
 			}
-
 		} catch (JSONException e) {
 			log.error("", e);
 		} catch (IOException e) {
@@ -82,9 +80,7 @@ public class JSONMediaResource extends DefaultMediaResource {
 		}
 	}
 
-	/**
-	 * @see org.olat.core.gui.media.MediaResource#getInputStream()
-	 */
+	@Override
 	public InputStream getInputStream() {
 		return null;
 	}

src/main/webapp/static/themes/light/_modules.scss

@@ -36,6 +36,7 @@
 @import "modules/comment";
 @import "modules/chart";
 @import "modules/various_modules";
+@import "modules/autocomplete";
 
 /* sites specific styles */
 @import "modules/coursesite";

src/main/webapp/static/themes/light/modules/_autocomplete.scss

+
+.typeahead,
+.tt-query,
+.tt-hint {
+  width: 396px;
+  height: 30px;
+  padding: 8px 12px;
+  font-size: 24px;
+  line-height: 30px;
+  border: 2px solid #ccc;
+  -webkit-border-radius: 8px;
+     -moz-border-radius: 8px;
+          border-radius: 8px;
+  outline: none;
+}
+
+.typeahead {
+  background-color: #fff;
+}
+
+.typeahead:focus {
+  border: 2px solid #0097cf;
+}
+
+.tt-query {
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.tt-hint {
+  color: #999
+}
+
+.tt-dropdown-menu {
+  width: 422px;
+  margin-top: 12px;
+  padding: 8px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 8px;
+     -moz-border-radius: 8px;
+          border-radius: 8px;
+  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+          box-shadow: 0 5px 10px rgba(0,0,0,.2);
+}
+
+.tt-suggestion {
+  padding: 3px 20px;
+  font-size: 18px;
+  line-height: 24px;
+}
+
+.tt-suggestion.tt-cursor {
+  color: #fff;
+  background-color: #0097cf;
+
+}
+
+.tt-suggestion p {
+  margin: 0;
+}
\ No newline at end of file