https://sajhivmed.org.za/lib/pkp/js/controllers/AutocompleteHandler.js

1/**
2 * @file js/controllers/AutocompleteHandler.js
3 *
4 * Copyright (c) 2013-2019 Simon Fraser University
5 * Copyright (c) 2000-2019 John Willinsky
6 * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
7 *
8 * @class AutocompleteHandler
9 * @ingroup js_controllers
10 *
11 * @brief PKP autocomplete handler (extends the functionality of the
12 *  jqueryUI autocomplete)
13 */
14(function($) {
15
16
17	/**
18	 * @constructor
19	 *
20	 * @extends $.pkp.classes.Handler
21	 *
22	 * @param {jQueryObject} $autocompleteField the wrapped HTML input element.
23	 * @param {Object} options options to be passed
24	 *  into the jqueryUI autocomplete plugin.
25	 */
26	$.pkp.controllers.AutocompleteHandler = function($autocompleteField, options) {
27		var autocompleteOptions, opt;
28
29		this.parent($autocompleteField, options);
30
31		// Get the text input inside of this Div.
32		this.textInput = $autocompleteField.find(':text');
33		this.textInput.keyup(this.callbackWrapper(this.synchronizeFields_));
34
35		// Get the text input inside of this Div.
36		this.hiddenInput_ = $autocompleteField.find(':hidden');
37
38		// Get the URL passed in
39		this.sourceUrl_ = options.sourceUrl;
40		options.sourceUrl = undefined;
41
42		// Create autocomplete settings.
43		opt = {};
44		opt.source = this.callbackWrapper(this.fetchAutocomplete);
45
46		autocompleteOptions = $.extend({ },
47				this.self('DEFAULT_PROPERTIES_'), opt, options);
48
49		// Create the autocomplete field with the jqueryUI plug-in.
50		this.textInput.autocomplete(autocompleteOptions);
51		this.bind('autocompleteselect', this.itemSelected);
52		this.bind('autocompletefocus', this.itemFocused);
53		this.textInput.blur(this.callbackWrapper(this.textInputBlurHandler_));
54	};
55	$.pkp.classes.Helper.inherits(
56			$.pkp.controllers.AutocompleteHandler, $.pkp.classes.Handler);
57
58
59	//
60	// Private static properties
61	//
62	/**
63	 * Default options
64	 * @private
65	 * @type {Object}
66	 * @const
67	 */
68	$.pkp.controllers.AutocompleteHandler.DEFAULT_PROPERTIES_ = {
69		// General settings
70		minLength: 2
71	};
72
73
74	//
75	// Private properties
76	//
77	/**
78	 * The hidden input inside the autocomplete div that holds the value.
79	 * @private
80	 * @type {jQueryObject}
81	 */
82	$.pkp.controllers.AutocompleteHandler.prototype.hiddenInput_ = null;
83
84
85	/**
86	 * The URL to be used for autocomplete
87	 * @private
88	 * @type {?string}
89	 */
90	$.pkp.controllers.AutocompleteHandler.prototype.sourceUrl_ = null;
91
92
93	//
94	// Protected properties
95	//
96	/**
97	 * The text input inside the autocomplete div that holds the label.
98	 * @protected
99	 * @type {jQueryObject}
100	 */
101	$.pkp.controllers.AutocompleteHandler.prototype.textInput = null;
102
103
104	//
105	// Public Methods
106	//
107	/**
108	 * Handle event triggered by selecting an autocomplete item
109	 *
110	 * @param {HTMLElement} autocompleteElement The element that triggered
111	 *  the event.
112	 * @param {Event} event The triggered event.
113	 * @param {Object} ui The tabs ui data.
114	 * @return {boolean} Return value to be passed back
115	 *  to jQuery.
116	 */
117	/*jslint unparam: true*/
118	$.pkp.controllers.AutocompleteHandler.prototype.itemSelected =
119			function(autocompleteElement, event, ui) {
120		var $hiddenInput, $textInput;
121
122		$hiddenInput = this.hiddenInput_;
123		$textInput = this.textInput;
124
125		// only update the text field if the item has a value
126		// this allows us to return a 'no items' label with
127		// an empty value.
128		if (ui.item.value !== '') {
129			$hiddenInput.val(ui.item.value);
130			$textInput.val(ui.item.label);
131		}
132		return false;
133	};
134	/*jslint unparam: false*/
135
136
137	/**
138	 * Handle event triggered by moving through the autocomplete suggestions.
139	 * The default behaviour is to insert the value in the text field.  This
140	 * handler inserts the label instead.
141	 *
142	 * @param {HTMLElement} autocompleteElement The element that triggered
143	 *  the event.
144	 * @param {Event} event The triggered event.
145	 * @param {Object} ui The tabs ui data.
146	 * @return {boolean} Return value to be passed back
147	 *  to jQuery.
148	 */
149	/*jslint unparam: true*/
150	$.pkp.controllers.AutocompleteHandler.prototype.itemFocused =
151			function(autocompleteElement, event, ui) {
152		var $textInput;
153
154		$textInput = this.textInput;
155
156		if (ui.item.value !== '') {
157			$textInput.val(ui.item.label);
158		}
159		return false;

160	};
161	/*jslint unparam: false*/
162
163
164	/**
165	 * Fetch autocomplete results.
166	 * @param {HTMLElement} callingElement The calling HTML element.
167	 * @param {Object} request The autocomplete search request.
168	 * @param {Function} response The response handler function.
169	 */
170	/*jslint unparam: true*/
171	$.pkp.controllers.AutocompleteHandler.prototype.fetchAutocomplete =
172			function(callingElement, request, response) {
173		var $textInput;
174
175		$textInput = this.textInput;
176		$textInput.addClass('spinner');
177		$.post(this.getAutocompleteUrl(), { term: request.term }, function(data) {
178			$textInput.removeClass('spinner');
179			response(data.content);
180		}, 'json');
181	};
182	/*jslint unparam: false*/
183
184
185	/**
186	 * Get the autocomplete Url
187	 * @return {?string} Autocomplete URL.
188	 */
189	$.pkp.controllers.AutocompleteHandler.prototype.getAutocompleteUrl =
190			function() {
191		return this.sourceUrl_;
192	};
193
194
195	/**
196	 * Set the autocomplete url
197	 * @param {string} url Autocomplete URL.
198	 */
199	$.pkp.controllers.AutocompleteHandler.prototype.setAutocompleteUrl =
200			function(url) {
201		this.sourceUrl_ = url;
202	};
203
204
205	//
206	// Private Methods
207	//
208	/**
209	 * Synchronize the input field and the hidden field.
210	 * @private
211	 */
212	$.pkp.controllers.AutocompleteHandler.prototype.synchronizeFields_ =
213			function() {
214		this.hiddenInput_.val(String(this.textInput.val()));
215	};
216
217
218	//
219	// Private methods.
220	//
221	/**
222	 * Text input element blur handler.
223	 * @private
224	 */
225	$.pkp.controllers.AutocompleteHandler.prototype.textInputBlurHandler_ =
226			function() {
227		// Make sure we clean the text input if user selected no option
228		// from the available ones but leaved some text behind. This
229		// is needed to avoid bad form validation and to make it clear to
230		// users that they need to select an option.
231		if (this.hiddenInput_.val() == '') {
232			this.textInput.val('');
233		}
234	};
235
236
237/** @param {jQuery} $ jQuery closure. */
238}(jQuery));