How to Create A Suggestion Box (Prompt Box in Javascript) Inside a Html Box With Text
...however I am not sure if there is a way to click on specific word (there could be more than one word in a sentence), and also is there way to style the suggestion box and add list of words to choose from by clicking on them.
Break down your problem into steps. This will make it easy for you to understand the problem domain and design a solution. From what I could make out of your question, the broad steps and their implementation could be like the ones described below.
Note 1: The answer is based on pure JavaScript. Remember that all frameworks like jQuery etc are JavaScript only abstracted at a higher level. It is important for you to learn basic JavaScript first.
Note 2: I've provided references for key concepts (for you to get more information and learn from) in the form of embedded links throughout this answer.
1) Markup and Javascript setup for words: There are certain words which have synonyms. The synonyms are available in the markup itself in the title attribute. The markup you arrived at, is just fine:
Markup:
<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>
We need to be able to identify all words that carry synonyms, so that we could use Javascript to manipulate those. These are identified in the markup as i elements with a class called synonyms.
Javascript:
var words = [].slice.call(document.querySelectorAll('i.synonyms'));
querySelectorAll returns a node list, so easiest way to convert that to an array is to call slice on array prototype. We need an array so that we can iterate it later on.
2) Markup and Javascript setup for menu: There needs to be a suggestion box to be popped up. So, just add an element which will hold your synonyms. You already know that there will be a list of synonyms, so semantically it makes sense to have a list element. And give it an id. We will fill it dynamically later on.
Markup:
<ul id="synonymMenu"></ul>
Javascript:
var menu = document.getElementById('synonymMenu');
3) Suggestion box menu should popup: whenever such a word is clicked. So, we need to add and event listener on all such words which will listen to a click event. We already have the words in the variable words in step one above. We just iterate and add the event listener to execute the function manageMenu. We will define that function later. While we are at it, we also cache the existing word in a data attribute to be able to use it later, using setAttribute.
words.forEach(function(wrd) {
wrd.setAttribute('data-word', wrd.textContent);
wrd.addEventListener('click', manageMenu);
});
4) Replace word with selected synonym: whenever, a synonym is clicked in the suggestion box menu. So we have to add a click event listener to the synonym list as well. We already have the menu stored in the variable menu in step 2 above. Just add the listener to execute function applySynonym. We will define that function later.
menu.addEventListener('click', applySynonym);
5) We have to close dangling suggestion box as well: We could do that by clicking anywhere on the body. Just add another click event handler on body. Execute function toggleMenu with a hide parameter. Will define this function later.
document.body.addEventListener('click', function() {
toggleMenu('hide');
});
6) Create a list of synonyms from the title attribute and show: it in the suggestion box menu, when the word is clicked. That we will define in the manageMenu function which we declared in step 3. Explanation is in code comments.
function manageMenu(e) {
// define variables
var synonyms, optn, link, position;
// clear existing list and then show the menu
clearMenu(); toggleMenu('show');
// cache the click event target to a variable to be used later
currentWord = e.target;
// get the position of word relative to viewport
position = currentWord.getBoundingClientRect();
// use that position to shift the popup menu near to the word
menu.style.top = position.top + 24 + 'px';
menu.style.left = position.left + 2 + 'px';
// extract title attribute, split by | and store in array
synonyms = currentWord.getAttribute('title').split('|');
// iterate array creating an li and anchor for each synonym
// createElement creates a new element
// appendChild adds an element to another
synonyms.forEach(function(syn) {
optn = document.createElement('li');
link = document.createElement('a');
link.setAttribute('href', '#'); link.textContent = syn;
// add anchor to li, and the li to the menu
optn.appendChild(link); menu.appendChild(optn);
});
// stop propagation of click, so that it doesn't go to body
e.stopPropagation();
}
The key references for you in the code above are about using the event object and its target, getting the position of word relative to viewport, createElement, appendChild, and stopPropagation
7) Synonym should be appended to the original word: and shown in its place, once a synonym is clicked. This we will define in the applySynonym fucntion that we referenced in step 4.
function applySynonym(e) {
var txt = '';
// Because we added event listener to the parent ul element,
// we have to check if the clicked element is the anchor or not
if (e.target.tagName != 'A') { return false; }
// We retrieve the orginal text from the data attribute,
// which we cached in step 6 above. And append current anchor's text
txt += '{' + currentWord.getAttribute('data-word') + '|';
txt += e.target.textContent + '}';
// replace the text of the word
currentWord.textContent = txt;
toggleMenu('hide'); // hide the suggestion box menu
// stop propagation of click, so that it doesn't go to body
// prevent default so that clicking anchor doesn't jump to top
e.stopPropagation(); e.preventDefault();
}
The key references for you in the code above are about preventDefault.
8) We define the rest of helper functions:
function toggleMenu(mode) {
if (mode == 'show') { menu.style.display = 'block'; }
if (mode == 'hide') { menu.style.display = 'none'; }
}
function clearMenu() {
// we loop the child nodes of menu ul element,
// remove the last child (last li) of that ul element,
// until it does not has-child-nodes.
while (menu.hasChildNodes()) {
menu.removeChild(menu.lastChild);
}
}
The key references for you in the code above are about hasChildNodes, removeChild, and lastChild.
9) Define the presentation via CSS, especially making the menu positioned absolutely, hiding it on first load and also beautify the presentation:
ul#synonymMenu {
position: absolute; display: none;
...
border: 1px solid #bbb; background-color: #efefef;
}
10) Test.
Demo Fiddle: https://jsfiddle.net/abhitalks/zske2aoh/
Demo Snippet:
(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);
}
}
})();* { 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;
}<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>Edit:
Per the Op's comments the code has been updated to accommodate multiple selections of synonyms via checkboxes. Added complexity is around adding checkboxes instead of plain anchors, changing the event listeners for the same, updated styles, and the logic to retain pre-existing selection on repeat clicks.
Updated Fiddle: https://jsfiddle.net/abhitalks/ffpL4f7k/
Updated Snippet:
(function() {
var menu = document.getElementById('synonymMenu'),
menuWrap = document.getElementById('menuWrapper'),
okButton = document.getElementById('synOk'),
words = [].slice.call(document.querySelectorAll('i.synonyms')),
currentWord = null
;
words.forEach(function(wrd) {
wrd.setAttribute('data-word', wrd.textContent);
wrd.addEventListener('click', manageMenu);
});
okButton.addEventListener('click', applySynonym);
document.body.addEventListener('click', function(e) {
if (isDescendant(menuWrapper, e.target)) {
return;
}
toggleMenu('hide');
});
function manageMenu(e) {
var synonyms, opt, lbl, chk, txt, position, existing;
clearMenu(); toggleMenu('show');
currentWord = e.target;
position = currentWord.getBoundingClientRect();
menuWrap.style.top = position.top + 20 + 'px';
menuWrap.style.left = position.left + 2 + 'px';
existing = currentWord.textContent;
synonyms = currentWord.getAttribute('title').split('|');
synonyms.forEach(function(syn) {
opt = document.createElement('li');
lbl = document.createElement('label');
chk = document.createElement('input');
chk.setAttribute('type', 'checkbox');
txt = document.createTextNode(syn);
lbl.appendChild(chk);
lbl.appendChild(txt);
opt.appendChild(lbl);
menu.appendChild(opt);
});
preSelect(existing);
e.stopPropagation();
}
function preSelect(existing) {
var labels = [].slice.call(menu.querySelectorAll('label'));
labels.forEach(function(lbl) {
if (existing.indexOf(lbl.textContent) > -1) {
lbl.firstChild.checked = true;
}
});
}
function applySynonym(e) {
var txt = '', labels, checked, selected;
labels = [].slice.call(menu.querySelectorAll('label'));
checked = labels.filter(function(lbl){
return lbl.firstChild.checked;
});
selected = checked.map(function(lbl){
return lbl.textContent;
}).join('|');
txt += '{' + currentWord.getAttribute('data-word') + '|';
txt += selected + '}';
currentWord.textContent = txt;
toggleMenu('hide');
e.stopPropagation();
}
function toggleMenu(mode) {
if (mode == 'show') { menuWrap.style.display = 'block'; }
if (mode == 'hide') { menuWrap.style.display = 'none'; }
}
function clearMenu() {
while (menu.hasChildNodes()) {
menu.removeChild(menu.lastChild);
}
}
function isDescendant(parent, child) {
var node = child.parentNode;
while (node != null) {
if (node == parent) {
return true;
}
node = node.parentNode;
}
return false;
}
})();* { font-family: sans-serif; box-sizing: border-box; }
html, body { height: 100%; }
div.wrap {
border: 1px solid #ddd; max-height: 480px;
padding: 4px 22px 4px 4px; font-size: 0.9em;
overflow: hidden; overflow-y: auto;
}
i.synonyms { cursor: pointer; color: #333; }
div#menuWrapper {
position: absolute; display: none; width: 128px;
padding: 4px; margin: 0;
border: 1px solid #bbb; background-color: #efefef;
box-shadow: 0px 0px 6px 1px rgba(128,128,128,0.3);
}
ul#synonymMenu {
max-height: 120px;
overflow: hidden; overflow-y: auto;
list-style: none; padding: 0; margin: 0;
}
ul#synonymMenu > li { display: block; }
ul#synonymMenu label {
display: block; color: #333; font-size: 0.9em;
padding: 2px 18px 2px 4px;
}
ul#synonymMenu label:hover { background-color: #99b; }
button#synOk { padding: 2px; width: 100%; }<div class="wrap">
<p>
I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges.
</p>
<p>
I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges.
</p>
<p>
I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges.
</p>
</div>
<div id="menuWrapper">
<ul id="synonymMenu"></ul>
<hr/>
<button id="synOk">Ok</button>
</div>I build the following jQuery component that suits your needs, I believe.
Here's the jsbin if you prefer that.
//jquery component
$.fn.synonyms = function(options){
options = $.extend({}, {separator: '|'}, options);
this.each(function(elKey, el){
var $el = $(el),
originalText = $el.text(),
originalTextSpan = $('<span>'+originalText+'</span>');
$el.html(originalTextSpan);
var suggestionBox = '<div>';
$.each($el.attr('data-synonyms').split(options.separator),
function(key, suggestion){
suggestionBox+='<span>'+suggestion+'</span> - ';
}
);
suggestionBox = suggestionBox.slice(0, -2);
suggestionBox += '</div>';
suggestionBox = $(suggestionBox);
suggestionBox.css({
display: 'none'
});
$el.click(function(){
suggestionBox.toggle();
});
suggestionBox.on('click','span',function(){
var selectedText = $(this).text();
originalTextSpan.text('{'+originalText+'|'+selectedText+'}');
onSelected(selectedText);
});
$el.append(suggestionBox);
});
function onSelected(selectedText){
if(options.onSelected){
options.onSelected(selectedText);
}
}
};
// How to use the component
$(function(){
$('[data-synonyms]').synonyms({
onSelected: function(selectedText){
alert('you selected:'+selectedText);
}
});
});div[data-synonyms]{
display: inline;
position: relative;
cursor: pointer;
text-decoration: underline;
}
div[data-synonyms] > div{
white-space: nowrap;
position: absolute;
top: 1.2em;
left: 0;
background: #fff;
border: 1px solid #bbb;
padding: 2px;
}
div[data-synonyms] > div > span{
text-decoration: underline;
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
I <div data-synonyms="love|really like|really love">like</div> apples. Carrots are the <div data-synonyms="worst|orangest">best</div> though.
</body>
</html>$(document).ready(function() {
$("b").on("click", function() {
var $b = $(this),
alternatives = this.title.split('|').join('</option><option>');
$b.after('<select class="selector"><option> </option><option>' + alternatives + '</option><select>');
});
$("body").on("change", "select.selector", function() {
var $sl = $(this),
txt = $sl.val();
$sl.prev('b').text(txt);
$sl.remove();
});
});b {
color: red;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
<p>I <b title="like|love|adore">like</b> apples, <b title="especially|particularily">particularily</b> if they are <b title="fresh|ripe">ripe</b>.</p>
</div>