multiselect - behave like link field

frappe/public/js/frappe/form/controls/autocomplete.js

@@ -18,12 +18,41 @@ frappe.ui.form.ControlAutocomplete = frappe.ui.form.ControlData.extend({
 		}
 	},
 
+	get_options() {
+		return this.df.options;
+	},
+
 	get_awesomplete_settings() {
+		var me = this;
 		return {
 			minChars: 0,
 			maxItems: 99,
 			autoFirst: true,
 			list: this.get_data(),
+			data: function (item) {
+				return {
+					label: item.label || item.value,
+					value: item.value
+				};
+			},
+			filter: function() {
+				return true;
+			},
+			item: function (item) {
+				var d = this.get_item(item.value);
+				if(!d.label) {	d.label = d.value; }
+
+				var _label = (me.translate_values) ? __(d.label) : d.label;
+				var html = "<strong>" + _label + "</strong>";
+				if(d.description && d.value!==d.description) {
+					html += '<br><span class="small">' + __(d.description) + '</span>';
+				}
+				return $('<li></li>')
+					.data('item.autocomplete', d)
+					.prop('aria-selected', 'false')
+					.html('<a><p>' + html + '</p></a>')
+					.get(0);
+			},
 			sort: () => {
 				return 0;
 			}
@@ -40,17 +69,43 @@ frappe.ui.form.ControlAutocomplete = frappe.ui.form.ControlData.extend({
 		});
 
 		this.$input.on('focus', () => {
+			this.get_dropdown();
 			if (!this.$input.val()) {
 				this.$input.val('');
 				this.$input.trigger('input');
 			}
 		});
 
+		this.$input.on('input', () => {
+			this.get_dropdown();
+		});
+
 		this.$input.on('awesomplete-selectcomplete', () => {
 			this.$input.trigger('change');
 		});
 	},
 
+	get_dropdown() {
+		var me = this;
+		const value = this.get_value() || '';
+		const values = value.split(', ').filter(d => d);
+		var term = values.pop() || '';
+		var args = {
+			'txt': term,
+			'doctype': this.get_options()
+		};
+
+		frappe.call({
+			type: "GET",
+			method:'frappe.desk.search.search_link',
+			no_spinner: true,
+			args: args,
+			callback: function(r) {
+				me._data = r.results
+			}
+		});
+	},
+
 	get_data() {
 		return this._data || [];
 	},

frappe/public/js/frappe/form/controls/multiselect.js

@@ -4,11 +4,15 @@ frappe.ui.form.ControlMultiSelect = frappe.ui.form.ControlAutocomplete.extend({
 
 		return Object.assign(settings, {
 			filter: function(text, input) {
-				return Awesomplete.FILTER_CONTAINS(text, input.match(/[^,]*$/)[0]);
-			},
-
-			item: function(text, input) {
-				return Awesomplete.ITEM(text, input.match(/[^,]*$/)[0]);
+				var d = this.get_item(text.value);
+				var v = Awesomplete.FILTER_CONTAINS(d.label, input.match(/[^,]*$/)[0]);
+				if(!v && d.value){
+					v = Awesomplete.FILTER_CONTAINS(d.value, input.match(/[^,]*$/)[0]);
+				}
+				if(!v && d.description){
+					v = Awesomplete.FILTER_CONTAINS(d.description, input.match(/[^,]*$/)[0]);
+				}
+				return v;
 			},
 
 			replace: function(text) {
@@ -20,7 +24,7 @@ frappe.ui.form.ControlMultiSelect = frappe.ui.form.ControlAutocomplete.extend({
 
 	get_values() {
 		const value = this.get_value() || '';
-		const values = value.split(', ').filter(d => d);
+		const values = value.split(/\s*,\s*/).filter(d => d);
 
 		return values;
 	},
@@ -31,5 +35,31 @@ frappe.ui.form.ControlMultiSelect = frappe.ui.form.ControlAutocomplete.extend({
 
 		// return values which are not already selected
 		return data.filter(d => !values.includes(d));
-	}
+	},
+	get_options() {
+		let options = '';
+		if(this.df.get_options) {
+			options = this.df.get_options();
+		}
+		else if (this.docname==null && cur_dialog) {
+			//for dialog box
+			options = cur_dialog.get_value(this.df.options);
+		}
+		else if (!cur_frm) {
+			const selector = `input[data-fieldname="${this.df.options}"]`;
+			let input = null;
+			if (cur_list) {
+				// for list page
+				input = cur_list.wrapper.find(selector);
+			}
+			if (cur_page) {
+				input = $(cur_page.page).find(selector);
+			}
+			if (input) {
+				options = input.val();
+			}
+		}
+
+		return options;
+	},
 });