Synonym selection inline

by PhilQ

HTML

I <div data-synonyms="love|really like|really love">like</div> apples. Carrots are the <div data-synonyms="worst|orangest">best</div> though.

CSS

div[data-synonyms]{
  display: inline;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dotted #888;
}
div[data-synonyms] > div{
  white-space: nowrap;
  position: absolute;
  top: 1.2em;
  left: auto;
  right: auto;
  background: #fff;
  border: 1px solid #bbb;
  padding: 2px;
}
div[data-synonyms] > div > span {
  color: #666;
  cursor: pointer;
}
div[data-synonyms] > div > span:hover {
	color: blue;
}
div[data-synonyms] > div > span.selected {
	color: black;
}

JavaScript

//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((originalText + "|" + $el.attr('data-synonyms')).split(options.separator),
           function(key, suggestion){
      suggestionBox+='<span>'+suggestion+'</span> - ';
    }
          );
    suggestionBox = suggestionBox.slice(0, -2);
    suggestionBox += '</div>';
    suggestionBox = $(suggestionBox).find('> span:nth-child(1)').addClass('selected').end();
    suggestionBox.css({
      display: 'none'
    });
  
    $el.click(function(e){
      suggestionBox.toggle();
		$(window).on('click.closethis', function(){
			suggestionBox.hide();
			$(this).off('closethis');
		});
		e.stopImmediatePropagation();
    });
  
    suggestionBox.on('click','span',function(){
		$(this).siblings().removeClass('selected');
		var selectedText = $(this).addClass('selected').text();
		//originalTextSpan.text('{'+originalText+'|'+selectedText+'}');
		originalTextSpan.text( selectedText );
		onSelected(selectedText);
    });
  
    $el.append(suggestionBox);
  });
  
  
  function onSelected(selectedText){
    if(options.onSelected){
      options.onSelected(selectedText);
    }
  }
};


// How to use the component
$(function(){
  $('[data-synonyms]').synonyms({
    separator: '|',
    onSelected: function(selectedText){
      alert('you selected:'+selectedText);
    }
  });
});