// jQuery Plugin for Adding Autofill/TypeAhead Suggestions // // Call with the following parameters: // { // "maxDisplay": n, Maximum number of suggestions to be displayed. Defaults to 10. // } (function($) { "use strict"; function getArrayOfOptionValues(params) { let str = params.inputField.val(); return( $('#' + params.inputField.attr('id') + '-dropdown option').map(function() { let v = JSON.parse(this.value); v.name = unescape(v.name); return v.name.substr(str.length); }).get() ); } function updateDataPointInInputField(params) { if ($('#' + params.inputField.attr('id') + '-dropdown option').length) { $('#' + params.inputField.attr('id')).data('point', JSON.parse($('#' + params.inputField.attr('id') + '-dropdown option').first().val()).point); } } function inputSuggestionTabKey(input, params) { let str = params.inputField.val(); let matched = true; let val = getArrayOfOptionValues(params); if (val.length === 1) { str += val[0]; } else { for (let i = 0; true; i++) { for (let j = 1; j < val.length; j++) { if (val[0].substr(i, 1) !== val[j].substr(i, 1)) { matched = false; break; } } if (matched) { str += val[0].substr(i, 1) } else { break; } } } params.inputField.val(str); if (parseInt($('#' + params.inputField.attr('id') + '-dropdown').attr('size')) === 1) hideDropDown(params); updateDataPointInInputField(params); } function jumpToDropDown(params) { $('#' + params.inputField.attr('id') + '-dropdown option').first().focus(); // $('#' + params.inputField.attr('id') + '-dropdown option:first').prop('selected', true); return; } function hideDropDown(params) { //$('#' + params.inputField.attr('id') + '-dropdown').html('').attr('size', 0).css({'display': 'none'}); } function isDropDownClosed(params) { return('none' === $('#' + params.inputField.attr('id') + '-dropdown').css('display')); } function getInputSuggestions(input, params, inKey) { if (params.inputField.val().length === 0) { // because of keyup, val() will have the most recent keystroke included if printable hideDropDown(params); return; } let val = getArrayOfOptionValues(params); $.getJSON('/mds/suggestion?' + 'type=proximity&searchString=' + encodeURI(params.inputField.val() + '&resultLimit=' + params.maxDisplay), function(sugg) { let s = JSON.parse(sugg); let html = ''; if (s !== null && s.length) { for (let i = 0; i < s.length; i++) { let name = s[i].name; s[i].name = escape(s[i].name); html += "\n"; } //$('#' + params.inputField.attr('id') + '-dropdown').attr('size', s.length).css({'display': 'inline-block'}); if (s.length === 1 && inKey !== 'Backspace') { params.inputField.val(unescape(s[0].name)); $('#' + params.inputField.attr('id')).data('point', s[0].point); hideDropDown(params); } } else { hideDropDown(params); } $('#' + params.inputField.attr('id') + '-dropdown').html(html); updateDataPointInInputField(params); $('#' + params.inputField.attr('id') + '-dropdown option').click(function(e) { e.preventDefault(); let v = JSON.parse($(this).val()); $('#' + params.inputField.attr('id')).val(unescape(JSON.parse($(this).val()).name)); }); }) .fail(function(e) { console.error("AJAX failed: ", e) showSearchErrorMessage('Search request was unsuccessful. Status: ' + e.status + ' - ' + e.statusText); }); } $.fn.autoSuggestInit = function(userParams) { let params = { inputField: $(this), maxDisplay: typeof userParams.maxDisplay === 'undefined' ? 10 : userParams.maxDisplay } $(params.inputField) .keydown(function(input) { if (input.key === 'Tab') { if (!isDropDownClosed(params)) { input.preventDefault(); inputSuggestionTabKey(input, params) } } }) .keyup(function (input) { switch(input.key) { case 'Tab': return; // case 'ArrowDown': // jumpToDropDown(params); // break; case 'Backspace': default: getInputSuggestions(input, params, input.key); } }); } }(jQuery));