Bug Tracker

Opened 12 years ago

Closed 11 years ago

Last modified 8 years ago

#3369 closed enhancement (invalid)

[autocomplete] 'mustMatch' option as function

Reported by: proasailor Owned by: joern
Priority: major Milestone: 1.3
Component: plugin Version: 1.2.6
Keywords: Cc:
Blocked by: Blocking:


May I suggest that the 'mustMatch' option can be a function, and if it is, it gets called instead of the existing code.

I modified function 'hideResultsNow()' at line 295 as follows, adding a single line:

    function (result) {
        if (typeof options.mustMatch == 'function') {
            options.mustMatch($input, result);
        else if( !result ) { // as before!
            // if no value found, clear the input box

This allows me to define a 'mustMatch($input, result)' function that adds a CSS class to highlight the field and a mouseover event to show a special dialog for adding the unrecognized term to the approved list.

The 'mustMatch()' function is called for both values of 'result', which allows me to also reliably _remove_ a flag for "invalid terminology", as well as set that flag in the first place.

Attachments (2)

vocab_dialog.gif (8.4 KB) - added by proasailor 12 years ago.
field highlight and dialog box appear when invalid term is typed
code_mustMatch.gif (16.3 KB) - added by proasailor 11 years ago.
proposed code changes for 'options.multiple' as a function

Download all attachments as: .zip

Change History (7)

comment:1 Changed 12 years ago by joern

need: ReviewTest Case
Owner: set to joern
Summary: Autocomplete plugin: 'mustMatch' option as function[autocomplete] 'mustMatch' option as function
Type: bugenhancement

comment:2 Changed 12 years ago by proasailor

Further experience with what I'm trying to accomplish shows that the single change I suggested isn't quite enough... for one thing, it helps to pass back the value of 'hasFocus', because if the field no longer has focus, then I don't want to highlight it and activate the dialog, which can happen as a result of AJAX delay - in 'hideResultsNow()':

options.mustMatch($input, result, hasFocus);

I also found it necessary to add a similar call to function 'receiveData()' in order to turn off the highlight/dialog when backspacing, though it doesn't seem to work reliably in all cases, esp. in Firefox or when using the <Delete> key:

	function receiveData(q, data) {
		if ( data && data.length && hasFocus ) {
			select.display(data, q);
			autoFill(q, data[0].value);
			if (typeof options.mustMatch == 'function') {
				options.mustMatch($input, true, hasFocus);
		} else {

So... where I am calling the 'mustMatch()' function might not be quite optimal yet, though these two changes have gone a long way toward highlighting the field and presenting a functional "Suggest New Term" dialog when characters are typed that create an invalid term.

Changed 12 years ago by proasailor

Attachment: vocab_dialog.gif added

field highlight and dialog box appear when invalid term is typed

comment:3 Changed 12 years ago by proasailor

Example code showing how the autocomplete is created using the 'mustMatch' function:

$(inputElm).autocomplete(MultiRowBDL.apiAcUrl, {delay:50, cacheLength:1, autoFill: true, extraParams: extra, matchContains: true, mustMatch: function(inputObj, result, hasFocus) {
		if (result) { // turn highlight/dialog OFF
		else if (inputObj.val() && hasFocus) { // turn highlight/dialog ON
			inputObj.get()[0].setAttribute('err_msgBLD', '|' + MultiRowBDL.vocabErrMsg);
			MultiRowBDL.errMsgOnFld(inputObj.get()[0], true);

comment:4 Changed 11 years ago by proasailor

NOTE: Extensive experience with this code has led to some changes for the proposed implementation. The changes are highlighted in green on the attachment called code_mustMatch.gif and a working test case has been provided to the plugin's author.

Changed 11 years ago by proasailor

Attachment: code_mustMatch.gif added

proposed code changes for 'options.multiple' as a function

comment:5 Changed 11 years ago by joern

Resolution: invalid
Status: newclosed
Note: See TracTickets for help on using tickets.