szurubooru/public_html/js/Controls/AutoCompleteInput.js

var App = App || {};
App.Controls = App.Controls || {};

App.Controls.AutoCompleteInput = function($input) {
	var _ = App.DI.get('_');
	var jQuery = App.DI.get('jQuery');
	var tagList = App.DI.get('tagList');

	var KEY_TAB = 9;
	var KEY_RETURN = 13;
	var KEY_DELETE = 46;
	var KEY_ESCAPE = 27;
	var KEY_UP = 38;
	var KEY_DOWN = 40;

	var options = {
		caseSensitive: false,
		source: null,
		maxResults: 15,
		minLengthToArbitrarySearch: 3,
		onApply: null,
		onDelete: null,
		onRender: null,
		additionalFilter: null,
	};
	var showTimeout = null;
	var cachedSource = null;
	var results = [];
	var activeResult = -1;
	var monitorInputHidingInterval = null;

	if ($input.length === 0) {
		throw new Error('Input element was not found');
	}
	if ($input.length > 1) {
		throw new Error('Cannot add autocompletion to more than one element at once');
	}
	if ($input.attr('data-autocomplete')) {
		throw new Error('Autocompletion was already added for this element');
	}
	$input.attr('data-autocomplete', true);
	$input.attr('autocomplete', 'off');

	var $div = jQuery('<div>');
	var $list = jQuery('<ul>');
	$div.addClass('autocomplete');
	$div.append($list);
	jQuery(document.body).append($div);

	function getSource() {
		if (cachedSource) {
			return cachedSource;
		} else {
			var source = tagList.getTags();
			source = _.sortBy(source, function(a) { return -a.usages; });
			source = _.filter(source, function(a) { return a.usages >= 0; });
			source = _.map(source, function(a) {
				return {
					tag: a.name,
					caption: a.name + ' (' + a.usages + ')',
				};
			});
			cachedSource = source;
			return source;
		}
	}

	$input.bind('keydown', function(e) {
		var func = null;
		if (isShown() && e.which === KEY_ESCAPE) {
			func = hide;
		} else if (isShown() && e.which === KEY_TAB) {
			if (e.shiftKey) {
				func = selectPrevious;
			} else {
				func = selectNext;
			}
		} else if (isShown() && e.which === KEY_DOWN) {
			func = selectNext;
		} else if (isShown() && e.which === KEY_UP) {
			func = selectPrevious;
		} else if (isShown() && e.which === KEY_RETURN && activeResult >= 0) {
			func = function() { applyAutocomplete(); hide(); };
		} else if (isShown() && e.which === KEY_DELETE && activeResult >= 0) {
			func = function() { applyDelete(); hide(); };
		}

		if (func !== null) {
			e.preventDefault();
			e.stopPropagation();
			e.stopImmediatePropagation();
			func();
		} else {
			window.clearTimeout(showTimeout);
			showTimeout = window.setTimeout(showOrHide, 250);
		}
	});

	$input.blur(function(e) {
		window.clearTimeout(showTimeout);
		window.setTimeout(function() { hide(); }, 50);
	});

	function getSelectionStart(){
		var input = $input.get(0);
		if (!input) {
			return;
		}
		if ('selectionStart' in input) {
			return input.selectionStart;
		} else if (document.selection) {
			input.focus();
			var sel = document.selection.createRange();
			var selLen = document.selection.createRange().text.length;
			sel.moveStart('character', -input.value.length);
			return sel.text.length - selLen;
		} else {
			return 0;
		}
	}

	function getTextToFind() {
		var val = $input.val();
		var start = getSelectionStart();
		return val.substring(0, start).replace(/.*\s/, '');
	}

	function showOrHide() {
		var textToFind = getTextToFind();
		if (textToFind.length === 0) {
			hide();
		} else {
			updateResults(textToFind);
			refreshList();
		}
	}

	function isShown() {
		return $div.is(':visible');
	}

	function hide() {
		$div.hide();
		window.clearInterval(monitorInputHidingInterval);
	}

	function selectPrevious() {
		select(activeResult === -1 ? results.length - 1 : activeResult - 1);
	}

	function selectNext() {
		select(activeResult === -1 ? 0 : activeResult + 1);
	}

	function select(newActiveResult) {
		if (newActiveResult >= 0 && newActiveResult < results.length) {
			activeResult = newActiveResult;
			refreshActiveResult();
		} else {
			activeResult = - 1;
			refreshActiveResult();
		}
	}

	function getResultsFilter(textToFind) {
		if (textToFind.length < options.minLengthToArbitrarySearch) {
			return options.caseSensitive ?
				function(resultItem) { return resultItem.tag.indexOf(textToFind) === 0; } :
				function(resultItem) { return resultItem.tag.toLowerCase().indexOf(textToFind.toLowerCase()) === 0; };
		} else {
			return options.caseSensitive ?
				function(resultItem) { return resultItem.tag.indexOf(textToFind) >= 0; } :
				function(resultItem) { return resultItem.tag.toLowerCase().indexOf(textToFind.toLowerCase()) >= 0; };
		}
	}

	function updateResults(textToFind) {
		var oldResults = results.slice();
		var source = getSource();
		var filter = getResultsFilter(textToFind);
		results = _.filter(source, filter);
		if (options.additionalFilter) {
			results = options.additionalFilter(results);
		}
		results = results.slice(0, options.maxResults);
		if (!_.isEqual(oldResults, results)) {
			activeResult = -1;
		}
	}

	function applyDelete() {
		if (options.onDelete) {
			options.onDelete(results[activeResult].tag);
		}
	}

	function applyAutocomplete() {
		if (options.onApply) {
			options.onApply(results[activeResult].tag);
		} else {
			var val = $input.val();
			var start = getSelectionStart();
			var prefix = '';
			var suffix = val.substring(start);
			var middle = val.substring(0, start);
			var index = middle.lastIndexOf(' ');
			if (index !== -1) {
				prefix = val.substring(0, index + 1);
				middle = val.substring(index + 1);
			}
			$input.val(prefix + results[activeResult].tag + ' ' + suffix.trimLeft());
			$input.focus();
		}
	}

	function refreshList() {
		if (results.length === 0) {
			hide();
			return;
		}

		$list.empty();
		_.each(results, function(resultItem, resultIndex) {
			var $listItem = jQuery('<li/>');
			$listItem.text(resultItem.caption);
			$listItem.attr('data-key', resultItem.tag);
			$listItem.hover(function(e) {
				e.preventDefault();
				activeResult = resultIndex;
				refreshActiveResult();
			});
			$listItem.mousedown(function(e) {
				e.preventDefault();
				activeResult = resultIndex;
				applyAutocomplete();
				hide();
			});
			$list.append($listItem);
		});
		if (options.onRender) {
			options.onRender($list);
		}
		refreshActiveResult();

		var x = $input.offset().left;
		var y = $input.offset().top + $input.outerHeight() - 2;
		if (y + $div.height() > window.innerHeight) {
			y = $input.offset().top - $div.height();
		}
		$div.css({
			left: x + 'px',
			top: y + 'px',
		});
		$div.show();
		monitorInputHiding();
	}

	function refreshActiveResult() {
		$list.find('li.active').removeClass('active');
		if (activeResult >= 0) {
			$list.find('li').eq(activeResult).addClass('active');
		}
	}

	function monitorInputHiding() {
		monitorInputHidingInterval = window.setInterval(function() {
			if (!$input.is(':visible')) {
				hide();
			}
		}, 100);
	}

	return options;
};