OO-2068: update typeahead

src/main/java/org/olat/admin/user/UserSearchListProvider.java

@@ -29,7 +29,6 @@ import org.olat.basesecurity.IdentityShort;
 import org.olat.core.CoreSpringFactory;
 import org.olat.core.gui.control.generic.ajax.autocompletion.ListProvider;
 import org.olat.core.gui.control.generic.ajax.autocompletion.ListReceiver;
-import org.olat.core.gui.util.CSSHelper;
 import org.olat.core.id.UserConstants;
 import org.olat.user.UserManager;
 
@@ -52,7 +51,7 @@ public class UserSearchListProvider implements ListProvider {
 	
 	@Override
 	public void getResult(String searchValue, ListReceiver receiver) {
-		Map<String, String> userProperties = new HashMap<String, String>();
+		Map<String, String> userProperties = new HashMap<>();
 		// We can only search in mandatory User-Properties due to problems
 		// with hibernate query with join and not existing rows
 		userProperties.put(UserConstants.FIRSTNAME, searchValue);
@@ -70,7 +69,7 @@ public class UserSearchListProvider implements ListProvider {
 			String key = ident.getKey().toString();
 			String displayKey = ident.getName();
 			String displayText = userManager.getUserDisplayName(ident);
-			receiver.addEntry(key, displayKey, displayText, CSSHelper.CSS_CLASS_USER);
+			receiver.addEntry(key, displayKey, displayText, null);
 		}					
 		if(hasMore){
 			receiver.addEntry(".....",".....");

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

@@ -113,6 +113,7 @@ public class AutoCompleterController extends BasicController {
 		myContent.contextPut("showDisplayKey", Boolean.valueOf(showDisplayKey));
 		myContent.contextPut("inputWidth", Integer.valueOf(inputWidth));
 		myContent.contextPut("minChars", Integer.valueOf(minChars));
+		myContent.contextPut("inputValue", "");
 		// Create a mapper for the server responses for a given input
 		mapper = new AutoCompleterMapper(noResults, showDisplayKey, gprovider);
 			

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

@@ -42,7 +42,6 @@ public class AutoCompleterListReceiver extends LogDelegator implements ListRecei
 	private static final String VALUE = "value";
 	private static final String CSS_CLASS = "cssClass";
 	private static final String CSS_CLASS_EMPTY = "";
-	private static final String CSS_CLASS_WITH_ICON = "o_icon ";
 	private static final String DISPLAY_KEY = "displayKey";
 	private static final String DISPLAY_KEY_NO_RESULTS = "-";
 	
@@ -103,7 +102,7 @@ public class AutoCompleterListReceiver extends LogDelegator implements ListRecei
 			if (iconCssClass == null) {
 				object.put(CSS_CLASS, CSS_CLASS_EMPTY);								
 			} else {
-				object.put(CSS_CLASS, CSS_CLASS_WITH_ICON + iconCssClass);				
+				object.put(CSS_CLASS, iconCssClass);				
 			}
 			// JSCON object finished
 			list.put(object);

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

@@ -34,6 +34,7 @@ import org.olat.core.util.StringHelper;
 public class AutoCompleterMapper implements Mapper {
 	private static final String PARAM_QUERY = "term";
 	protected static final String PARAM_KEY = "key";
+	protected static final String PARAM_VALUE = "val";
 	
 	private final String noResults;
 	private final boolean showDisplayKey;

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

@@ -63,6 +63,7 @@ import org.olat.core.gui.control.WindowControl;
 public class FlexiAutoCompleterController extends FormBasicController {
 
 	protected static final String COMMAND_SELECT = "select";
+	protected static final String COMMAND_CHANGE = "change";
 	protected static final String JSNAME_INPUTFIELD = "o_autocomplete_input";
 	protected static final String JSNAME_DATASTORE = "autocompleterDatastore";
 	protected static final String JSNAME_COMBOBOX = "autocompleterCombobox";
@@ -155,6 +156,7 @@ public class FlexiAutoCompleterController extends FormBasicController {
 		layoutCont.contextPut("inputWidth", Integer.valueOf(inputWidth));
 		layoutCont.contextPut("minChars", Integer.valueOf(minChars));
 		layoutCont.contextPut("flexi", Boolean.TRUE);
+		layoutCont.contextPut("inputValue", "");
 		layoutCont.getComponent().addListener(this);
 
 		// Create a mapper for the server responses for a given input
@@ -179,17 +181,16 @@ public class FlexiAutoCompleterController extends FormBasicController {
 	 */
 	public void event(UserRequest ureq, Component source, Event event) {
 		if (source == flc.getComponent()) {
+			String value = getSearchValue(ureq);
+			flc.contextPut("inputValue", value);			
 			if (event.getCommand().equals(COMMAND_SELECT)) {
 				doSelect(ureq);
-			}
-		} else if(source == mainForm.getInitialComponent()) {
-			if(allowNewValues) {
-				String searchValue = getSearchValue(ureq);
-				List<String> selectedEntries = new ArrayList<String>();
-				selectedEntries.add(searchValue);
-				fireEvent(ureq, new EntriesChosenEvent(selectedEntries));	
-			} else {
-				super.event(ureq, source, event);
+			} else if (event.getCommand().equals(COMMAND_CHANGE)) {
+				if(allowNewValues) {
+					fireEvent(ureq, new NewValueChosenEvent(value));	
+				} else {
+					super.event(ureq, source, event);
+				}				
 			}
 		} else {
 			super.event(ureq, source, event);

src/main/java/org/olat/core/gui/control/generic/ajax/autocompletion/NewValueChosenEvent.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>
+ */
+package org.olat.core.gui.control.generic.ajax.autocompletion;
+
+import java.util.Collections;
+
+/**
+ * Description:<br>
+ * This Event is triggered when a new value is entered into the autocomplete input that is not
+ * part of the suggested entries.
+ * <p>
+ * Initial Date:  31.05.2016 <br>
+ *
+ * @author Daniel Haag
+ */
+public class NewValueChosenEvent extends EntriesChosenEvent {
+
+	private static final long serialVersionUID = -7082754083015536137L;
+
+	/**
+	 * @param newValue
+	 */
+	NewValueChosenEvent(String newValue) {
+		super(Collections.singletonList(newValue));
+	}
+
+}

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

@@ -8,7 +8,7 @@
 		$autocompleter_label 
 	#end
 	<div class="$formElementClass">
-	    <input type="text" size="$inputWidth" class="form-control" name='$r.getId("o_autocomplete_input")' id='$r.getId("o_autocomplete_input")' />
+	    <input type="text" size="$inputWidth" value="$inputValue" class="form-control" name='$r.getId("o_autocomplete_input")' id='$r.getId("o_autocomplete_input")' />
 	</div>	
 	#if($flexi)
 		</div>
@@ -26,9 +26,11 @@ jQuery(function(){
 		queryTokenizer: Bloodhound.tokenizers.whitespace,
 		remote: {
 			url: '${mapuri}?term=%QUERY',
+			wildcard: '%QUERY',
 			filter: function ( response ) {
 				return jQuery.map(response, function (object) {
 					return {
+						cssClass: object.cssClass,
 						value: '' + object.key,
 						#if($showDisplayKey)
 						fullName: object.displayKey + ": " + object.value
@@ -48,9 +50,24 @@ jQuery(function(){
 	},{
 		minLength: 3,
 		displayKey: 'fullName',
-		source: fullNameTypeahead.ttAdapter()
+		source: fullNameTypeahead.ttAdapter(),
+		templates: {
+	        #if ($autocompleter_emptymessage)
+			empty: [
+		    		'<div>','$autocompleter_emptymessage','</div>' 
+	        ].join('\n'),
+	    	#end
+	    	suggestion: function(obj) {return "<div class='"+obj.cssClass+"'>"+obj.fullName+"</div>"}
+		}
+	}).on('typeahead:render', function (e) {
+		// disabled and error items should not be selectable
+		jQuery("div.o_disabled.tt-selectable, div.o_icon_error.tt-selectable").removeClass("tt-selectable");
 	}).on('typeahead:selected', function (e, object) { 
-		$r.openJavaScriptCommand("select"),'key',object.value);
+		$r.openJavaScriptCommand("select"),'key',object.value,
+			'$r.getId("o_autocomplete_input")',jQuery('#$r.getId("o_autocomplete_input")').val());
+	}).on('typeahead:change', function(e, value) {
+		$r.openJavaScriptCommand("change"),'key','',
+			'$r.getId("o_autocomplete_input")',jQuery('#$r.getId("o_autocomplete_input")').val());
 	});
 });
 /* ]]> */

src/main/java/org/olat/core/gui/util/CSSHelper.java

@@ -42,6 +42,8 @@ public class CSSHelper {
 	public static final String CSS_CLASS_INFO = "o_icon_info";
 	public static final String CSS_CLASS_NEW = "o_icon_new";
 
+	public static final String CSS_CLASS_DISABLED = "o_disabled";
+
 	/**
 	 * Get the icon css class for a file based on the file ending (e.g. hello.pdf)
 	 * 

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

@@ -2,7 +2,7 @@
 	width: $o-autocomplete-width;
 }
 
-.tt-dropdown-menu {
+.tt-menu {
   	width: $o-autocomplete-width;
   	margin-top: $padding-base-vertical;
   	padding: 0 0 0;
@@ -21,11 +21,15 @@
   	line-height: $o-autocomplete-line-height;
 }
 
-.tt-suggestion.tt-cursor {
+.tt-suggestion.tt-cursor, .tt-suggestion:hover  {
   	color: $o-autocomplete-suggestion-color;
   	background-color: $o-autocomplete-suggestion-bg-color;
 }
 
 .tt-suggestion p {
   	margin: 0;
-}
\ No newline at end of file
+}
+
+.tt-menu div.o_icon_error:before {
+	content:'';
+}