Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Autocomplete improvements #1639

Merged
merged 8 commits into from
Feb 10, 2016
Merged

Autocomplete improvements #1639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3e01ddf
refactor setOptions to make it a bit less verbose
Jan 21, 2016
358e275
Save reference to jquery wrapped input and refactored accordingly
Jan 21, 2016
b071c19
Hide autocomplete dropdown when scrolling the page
Jan 21, 2016
a0372b9
add delay option
Jan 21, 2016
7466f1c
Providing autocomplete with open/close callback functions
Jan 21, 2016
7b39e1b
Stop blurring the input after selecting a value
Jan 21, 2016
3642b05
Add the `clearTextAfterValidInput` option
Jan 21, 2016
fd4ff25
Use formatted value for the input
Jan 21, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 70 additions & 36 deletions ...ascript/br-presenter/src/br/presenter/control/selectionfield/JQueryAutoCompleteControl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ function JQueryAutoCompleteControl() {

/** @private */
this.m_eElement = {};
this.m_jQueryInput = null;
this.m_bOpenOnFocus = false;
this.m_sAppendTo = 'body';
this._viewOpened = false;
Expand Down Expand Up @@ -77,31 +78,31 @@ JQueryAutoCompleteControl.prototype.setPresentationNode = function(oPresentation
throw new InvalidControlModelError('JQueryAutoCompleteControl', 'AutoCompleteSelectionField');
}

this.m_eElement.value = oPresentationNode.value.getValue();
this.m_eElement.value = oPresentationNode.value.getFormattedValue();
this._valueChangedListener = oPresentationNode.value.addUpdateListener(this, '_valueChanged');
this.m_oPresentationNode = oPresentationNode;
};

JQueryAutoCompleteControl.prototype.onViewReady = function() {
var oJqueryInput = jQuery(this.m_eElement);
this.m_jQueryInput = jQuery(this.m_eElement);
var self = this;
this._viewOpened = true;

oJqueryInput.keydown(function(event, oUi) {
if (event.which == 13) // Enter.
{
self._setValue(self.m_oPresentationNode, this, oUi);
event.stopImmediatePropagation();
event.preventDefault();
this.blur();
return false;
}
});

oJqueryInput.autocomplete({
this.m_jQueryInput.autocomplete({
delay: this.delay || 0,
minLength: self.m_nMinCharAmount || 0,
autoFocus: true,
appendTo: self.m_sAppendTo,
open: function() {
// ensure menu is on top of elements
self.m_jQueryInput.autocomplete('widget').css('z-index', 999999);

self.m_jQueryInput.addClass('autocomplete-menu-open');

return false;
},
close: function() {
self.m_jQueryInput.removeClass('autocomplete-menu-open');
},
source: function(request, response) {
var sTerm = request.term;
self.m_oPresentationNode.getAutoCompleteList(sTerm, function(pValues) {
Expand All @@ -110,9 +111,6 @@ JQueryAutoCompleteControl.prototype.onViewReady = function() {
},
select: function(event, oUi) {
self._setValue(self.m_oPresentationNode, this, oUi);
// don't propagate this to the keydown (if it's triggered by an enter)
event.stopImmediatePropagation();
event.preventDefault();
// if the selection is triggered by a click, not by pressing enter, then blur
if (self.m_bBlurAfterClick === true) {
var ie8LeftClick = !event.button && !event.which;
Expand All @@ -126,55 +124,91 @@ JQueryAutoCompleteControl.prototype.onViewReady = function() {
}
});

this._onDocumentFocus = this._onDocumentFocus.bind(this);
this.m_jQueryInput.on('focus', this._onDocumentFocus);

this._onScroll = this._onScroll.bind(this);
jQuery( document.body ).on('mousewheel wheel', this._onScroll);

this._viewOpened = true;
};

JQueryAutoCompleteControl.prototype._onScroll = function(wheelEvent) {
var isEventTargetChildOfAutoComplete = this.m_jQueryInput.autocomplete('widget')[0].contains(wheelEvent.target);

if( isEventTargetChildOfAutoComplete === false ) {
this.m_jQueryInput.autocomplete('close');
}
};

JQueryAutoCompleteControl.prototype._onDocumentFocus = function() {
this.m_jQueryInput.select();

if (this.m_bOpenOnFocus) {
oJqueryInput.focus(function(e) {
jQuery(this).autocomplete('search', oJqueryInput.val() || '');
});
this.m_jQueryInput.autocomplete('search', this.m_jQueryInput.val() || '');
}
};

JQueryAutoCompleteControl.prototype._setValue = function(oPresentationNode, oInput, oUi) {
if (oPresentationNode.isValidOption(oInput.value)) {
oPresentationNode.value.setValue(oInput.value);
this.m_eElement.value = oInput.value;
} else if (oUi) {
oPresentationNode.value.setValue(oUi.item.value);
this.m_eElement.value = oUi.item.value;
var isValidOption = oPresentationNode.isValidOption( oInput.value );

if ( isValidOption || oUi ) {
var presentationNodeValue = isValidOption ? oInput.value : oUi.item.value;

oPresentationNode.value.setValue( presentationNodeValue );
this.m_eElement.value = ( this.clearTextAfterValidInput ? '' : oPresentationNode.value.getFormattedValue());
}
};

JQueryAutoCompleteControl.prototype._valueChanged = function() {
this.m_eElement.value = this.m_oPresentationNode.value.getValue();
this.m_eElement.value = this.m_oPresentationNode.value.getFormattedValue();
};

/**
* @private
*/
JQueryAutoCompleteControl.prototype.setOptions = function(mOptions) {
if (mOptions && mOptions.openOnFocus !== undefined && mOptions.openOnFocus !== 'false') {
mOptions = mOptions || {};

if (mOptions.openOnFocus !== undefined && mOptions.openOnFocus !== 'false') {
this.m_bOpenOnFocus = true;
}
if (mOptions && mOptions.appendTo !== undefined) {
if (mOptions.appendTo !== undefined) {
this.m_sAppendTo = mOptions.appendTo;
}
if (mOptions && mOptions.minCharAmount !== undefined) {
if (mOptions.minCharAmount !== undefined) {
this.m_nMinCharAmount = mOptions.minCharAmount;
}
if ( mOptions && mOptions.blurAfterClick !== undefined) {
if (mOptions.blurAfterClick !== undefined) {
this.m_bBlurAfterClick = mOptions.blurAfterClick;
}
if (mOptions.delay !== undefined) {
this.delay = mOptions.delay;
}
if (mOptions.clearTextAfterValidInput !== undefined) {
this.clearTextAfterValidInput = mOptions.clearTextAfterValidInput;
}
};

/**
* Destroy created listeners and jQuery autocomplete plugin
*/
JQueryAutoCompleteControl.prototype.destroy = function() {
// if onOpen is never called the control wouldn't be initialised, hence we must guard against that
if(this._viewOpened) {
this.m_jQueryInput.off('focus', this._onDocumentFocus);
jQuery( document.body ).off('mousewheel wheel', this._onScroll);
this.m_jQueryInput.autocomplete('destroy');
this.m_jQueryInput.off();
}

if (this._valueChangedListener) {
this.m_oPresentationNode.value.removeListener(this._valueChangedListener);
}
if (this._viewOpened === true) {
jQuery(this.m_eElement).autocomplete('destroy').off();
}
}

this._valueChangedListener = null;
this.m_jQueryInput = null;
this.m_eElement = null;
};

module.exports = JQueryAutoCompleteControl;
14 changes: 9 additions & 5 deletions brjs-sdk/sdk/libs/javascript/br-presenter/test-acceptance/resources/html/test-form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@

<input type="text" id="jqueryAutoCompleteBox" data-bind="control:'br.autocomplete-box',controlOptions:{appendTo: '#autocomplete-container'}, controlNode:jquerySelectionField"/>
<input type="text" id="jqueryAutoCompleteBox2" data-bind="control:'br.autocomplete-box',controlOptions:{appendTo: '#autocomplete-container2', minCharAmount: 2}, controlNode:jquerySelectionField"/>
<input type="text" id="jqueryAutoCompleteBox3" data-bind="control:'br.autocomplete-box',controlOptions:{appendTo: '#autocomplete-container', blurAfterClick: true}, controlNode:jquerySelectionField"/>
<input type="text" id="jqueryAutoCompleteBox3" data-bind="control:'br.autocomplete-box',controlOptions:{appendTo: '#autocomplete-container3', blurAfterClick: true}, controlNode:jquerySelectionField"/>
<input type="text" id="jqueryAutoCompleteBox4" data-bind="control:'br.autocomplete-box',controlOptions:{appendTo: '#autocomplete-container4', delay: 100}, controlNode:jquerySelectionField"/>
<input type="text" id="jqueryAutoCompleteBox5" data-bind="control:'br.autocomplete-box',controlOptions:{appendTo: '#autocomplete-container5', clearTextAfterValidInput: true}, controlNode:jquerySelectionField"/>


<div id="datePicker" data-bind="control:'br.date-picker',value:date"></div>
<div id="datePicker2" data-bind="control:'br.date-picker',value:dateInitiallyDisabledAndHidden"></div>
Expand All @@ -32,9 +35,10 @@
<span id="alias-plain" data-bind="text:aliasPlain"></span>
<span id="alias-formatted" data-bind="text:aliasFormatted"></span>
</div>
<div id="autocomplete-container">
</div>
<div id="autocomplete-container2">
</div>
<div id="autocomplete-container"></div>
<div id="autocomplete-container2"></div>
<div id="autocomplete-container3"></div>
<div id="autocomplete-container4"></div>
<div id="autocomplete-container5"></div>

</div>
10 changes: 8 additions & 2 deletions ...bs/javascript/br-presenter/test-acceptance/src-test/br/presenter/TestPresentationModel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ TestPresentationModel = function()
this.labelValueSelectionField.visible.setValue(true);

this.jquerySelectionField = new AutoCompleteSelectionField("BB", {
list: ["AA", "BB", "CC"],
list: ["AA", "BB", "CC", "FormatMe"],
getList: function(sTerm, fCallback) {
var pResult = [];
for (var i = 0; i < this.list.length; i++)
Expand All @@ -65,7 +65,13 @@ TestPresentationModel = function()
return ArrayUtility.inArray(this.list, sOption);
}
});


this.jquerySelectionField.value.addFormatter({
format: function (value) {
return value === "FormatMe" ? "Formatted" : value;
}
})

this.multiSelectBox = new MultiSelectionField(["a","b","c", "d"], ["a","c"]);
this.multiSelectBox.controlName.setValue("aMultiSelectionField");

Expand Down
67 changes: 0 additions & 67 deletions ...nter/test-acceptance/tests/control/selectionfield/JQueryAutoCompleteControlAdapterTest.js
View file
Open in desktop

This file was deleted.

Loading