JS: Suggestion popup sysnonym

SO Question #36049942; http://stackoverflow.com/questions/36049942/how-to-create-a-suggestion-box-prompt-box-in-javascript-inside-a-html-box-with

by abhitalks

HTML

<p>
I <i class="synonyms" title="love|really like|really love">like</i> apples. 
I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. 
</p>
<ul id="synonymMenu"></ul>

CSS

* { font-family: sans-serif; }
html, body { height: 100%; }
i.synonyms { cursor: pointer; color: #333; }
ul#synonymMenu {
	position: absolute; display: none;
	width: auto; max-height: 120px; 
	overflow: hidden; overflow-y: auto;
	list-style: none; padding: 0; margin: 0; 
	border: 1px solid #bbb; background-color: #efefef;
	box-shadow: 0px 0px 6px 1px rgba(128,128,128,0.3);
}
ul#synonymMenu > li { display: block; }
ul#synonymMenu a { 
	display: block; padding: 4px 20px 4px 6px; 
	color: #333; font-size: 0.9em; text-decoration: none;
}
ul#synonymMenu a:hover {
	background-color: #99b;
}

JavaScript

(function() {
	var menu = document.getElementById('synonymMenu'), 
		words = [].slice.call(document.querySelectorAll('i.synonyms')), 
		currentWord = null
	;
	
	words.forEach(function(wrd) {
		wrd.setAttribute('data-word', wrd.textContent);
		wrd.addEventListener('click', manageMenu);
	});
	menu.addEventListener('click', applySynonym);
	document.body.addEventListener('click', function() {
		toggleMenu('hide');
	});

	function manageMenu(e) {
		var synonyms, optn, link, position; 
		clearMenu(); toggleMenu('show'); 
		currentWord = e.target;
		position = currentWord.getBoundingClientRect();
		menu.style.top = position.top + 24 + 'px';
		menu.style.left = position.left + 2 + 'px';
		synonyms = currentWord.getAttribute('title').split('|');
		synonyms.forEach(function(syn) {
			optn = document.createElement('li');
			link = document.createElement('a');
			link.setAttribute('href', '#'); link.textContent = syn;
			optn.appendChild(link); menu.appendChild(optn);
		});
		e.stopPropagation();
	}
	
	function applySynonym(e) {
		var txt = '';
		if (e.target.tagName != 'A') { return false; }
		txt += '{' + currentWord.getAttribute('data-word') + '|';
		txt += e.target.textContent + '}';
		currentWord.textContent = txt;
		toggleMenu('hide');
		e.stopPropagation(); e.preventDefault();
	}
	
	function toggleMenu(mode) {
		if (mode == 'show') { menu.style.display = 'block'; }
		if (mode == 'hide') { menu.style.display = 'none'; }
	}
	
	function clearMenu() {
		while (menu.hasChildNodes()) { 
			menu.removeChild(menu.lastChild); 
		}
	}
	
})();