Showing suggestions for spellchecking in a content-editable div

Question

I am developing a spellchecker for the Indian language. So far, spell checking is able to find misspelled words.

I use a div editable for content for this purpose. So now I need to show sentences for misspelled words whenever the user right-clicks or chooses the wrong sentence of words, should be replaced with misspelled words, or just ignore it.

Iam having a sentence generator algorithm in perl. I just need to link with javascript . I'm stuck on how to show sentences (draw a menu with the cursor). I found the code after a google search. But could not go further.

 <script type="text/javascript"> if (document.addEventListener) { document.addEventListener('contextmenu', function(e) { alert("You've tried to open context menu"); //here you draw your own menu e.preventDefault(); }, false); } else { document.attachEvent('oncontextmenu', function() { alert("You've tried to open context menu"); window.event.returnValue = false; }); } </script> 

Answer 1

You can use jQuery to discredit your goal. I created a very simple example, but with a little effort you could do it the way you want (prevent a few context menus, styles, load elements dynamically, ...).

HTML <div id="context">lalalalala</div>

Javascript

 $(document).ready(function(){ $('#context').on('contextmenu', function(e){ var content = $('#context').html(); var temp = content + '<div style="background-color: #CCC; color: #000; width: 150px; padding: 5px;">\ <h4>Suggestions</h4>\ <ul class="suggestions">\ <li>first suggestion</li>\ <li>second suggestion</li>\ <li>third suggestion</li>\ </ul>\ </div>'; $('#context').html(temp); $('.suggestions li').on('click', function(e){ $('#context').html($(this).text()); }); e.preventDefault(); }); }); 

http://jsfiddle.net/4gWjM/

Answer 2

You just need to use spellcheck="true" on the div

Ex. <div spellcheck="true"><input type="text" name="fname" ></div>

Help site

Help site 2

Edit : I forgot to specify the second link

Answer 3

How about something like this: http://jsfiddle.net/974Dm/

It does not create a whole menu, but it gives you a right-click spelling error.

 var editor = document.getElementById("editor"); editor.addEventListener("contextmenu", function(event) { var misspelling = event.target; while (misspelling && misspelling.className != "misspelled") { misspelling = misspelling.parentNode; } if (misspelling) { // Show your suggestions menu // misspelling is <span class="mispelled">abc</span> console.log("Show suggestions for " + misspelling.innerHTML, misspelling); event.preventDefault(); } }); 

Update. To create an offer menu, you need to use AJAX.