Hanson.xyz Dev
95 lines
3.4 KiB
Plaintext
Executable File
95 lines
3.4 KiB
Plaintext
Executable File
|
|
var _ = require('./_.js');
|
|
let $ = jQuery;
|
|
|
|
|
|
// Jquery plugin 'autocomplete'
|
|
// This code will show ghost text of the first matching suggestion for autocompleting a textbox out of provided
|
|
// words 'words'.
|
|
$.fn.xyz_autocomplete = function (options) {
|
|
var settings = $.extend({
|
|
words: []
|
|
}, options);
|
|
|
|
var suggestWord = function (input, words) {
|
|
var typedValue = input.val().toLowerCase().split(' ').pop();
|
|
if (typedValue === '') {
|
|
return '';
|
|
}
|
|
|
|
for (var i = 0; i < words.length; i++) {
|
|
if (words[i].toLowerCase().indexOf(typedValue) === 0) {
|
|
return words[i].substr(typedValue.length);
|
|
}
|
|
}
|
|
return '';
|
|
};
|
|
|
|
return this.each(function () {
|
|
var $input = $(this);
|
|
var $suggestion = $('<span class="auto-complete-suggestion"></span>');
|
|
|
|
$input.after($suggestion);
|
|
|
|
var inputComputedStyle = window.getComputedStyle($input.get(0));
|
|
|
|
$suggestion.css({
|
|
'pointer-events': 'none',
|
|
'position': 'absolute',
|
|
'max-width': $input.innerWidth(),
|
|
'overflow': 'hidden',
|
|
'white-space': 'nowrap',
|
|
'font': $input.css('font'),
|
|
'padding-left': parseFloat(inputComputedStyle.getPropertyValue('padding-left')) + 1 + parseFloat(inputComputedStyle.getPropertyValue('border-left-width')),
|
|
});
|
|
|
|
var updateSuggestion = function () {
|
|
var suggestedText = suggestWord($input, settings.words);
|
|
if (suggestedText !== '' && $input.val().length > 2) {
|
|
var typedValue = $input.val();
|
|
var zeroOpacityText = '<span style="opacity: 0;">' + typedValue + '</span>';
|
|
$suggestion.html(zeroOpacityText + suggestedText);
|
|
$('body > span:last-child').remove();
|
|
$suggestion.css({
|
|
'top': ($input.position().top + $input.outerHeight() / 2 - $suggestion.outerHeight() / 2) + 'px',
|
|
'left': ($input.position().left) + 'px',
|
|
});
|
|
} else {
|
|
$suggestion.text('');
|
|
}
|
|
};
|
|
|
|
$input.on('input', updateSuggestion);
|
|
|
|
// Add keydown event listener to handle the Tab key
|
|
$input.on('keydown', function (e) {
|
|
if (e.keyCode === 9) { // Tab key
|
|
e.preventDefault(); // Prevent the default tab key behavior (switching focus)
|
|
var suggestedText = $suggestion.text();
|
|
if (suggestedText !== '') {
|
|
$input.val(suggestedText); // Replace the text in the $input element with the suggestion
|
|
$suggestion.hide();
|
|
$input.blur();
|
|
$input.focus();
|
|
}
|
|
}
|
|
});
|
|
|
|
$input.on('focus', function () {
|
|
$suggestion.show();
|
|
updateSuggestion();
|
|
});
|
|
|
|
$input.on('blur', function () {
|
|
var suggestedText = $suggestion.text();
|
|
if (suggestedText !== '') {
|
|
$input.val(suggestedText); // Replace the text in the $input element with the suggestion
|
|
}
|
|
$suggestion.hide();
|
|
});
|
|
|
|
$input.on('resize', function () {
|
|
$suggestion.css('max-width', $input.innerWidth() - 2);
|
|
});
|
|
});
|
|
}; |