showing suggestions for spell checker in content-editable div

Question

I am developing spell checker for an Indian Language. So far the spell checker is able to find the wrongly spelt words.

I am using a content-editable div for this purpose.So now I need to show the suggestions for wrongly spelt words whenever the user right clicks or selects the wrong word suggestions are to be shown to replace with the wrongly spelt words or simply ignore it.

Iam having a suggestion generator algorithm in perl. I just need to link with javascript .Iam stuck in how to show the suggestions(draw the menu at the cursor).I found some code after searching Google.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>

Can you precise your question: is your problem to draw the menu where the cursor is? Or is it to show the suggestions related to the word where the cursor is? Or both? :) — Djizeus, May 12 '14 at 14:26
@Raju so what is the difference with this other question from you: http://stackoverflow.com/questions/23559003/menuitem-and-contextmenu-crossbrowser-compatability ? — Djizeus, May 13 '14 at 06:01
After some time in Google I had created a menu using javascript.Its not working in google-chrome but is working well in firefox. — Nagaraju, May 13 '14 at 06:03
Then you should either close this question if the remaining problem is in the other question, or edit your question to state what the problem is exactly. — Djizeus, May 13 '14 at 07:05
@Djizeus How can I close this question without related answers.. — Nagaraju, May 13 '14 at 08:36

score 3 · Accepted Answer · answered May 13 '14 at 10:53

You could use jQuery to compromise your goal. I've created a very simple example, but with a bit of effort you could make it as you want to(prevent multiple contextmenu's, styling, load the items 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/

Good answer the kind of one I need – Nagaraju May 13 '14 at 12:14 — Nagaraju, May 13 '14 at 12:14

SagarPPanchal · Answer 2 · 2014-05-07T12:24:16.200

2

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

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

Reference site

Reference site 2

Edit: I forget to give the link of the second one

edited May 07 '14 at 12:24

answered May 07 '14 at 11:55

SagarPPanchal

9,839
6
34
62

1

Actually I want to add the suggestions created by my algorithm to the right click menu. Giving spell check =true will give browsers suggestions. – Nagaraju May 07 '14 at 12:04
Question asker said: `So far the spell checker is able to find the wrongly spelt words.`. The code you give does the same, now he asks: `So now I need to show the suggestions for wrongly spelt words whenever the user right clicks or selects the wrong word suggestions are to be shown to replace with the wrongly spelt words or simply ignore it.`. – Daan May 07 '14 at 12:04
1

@SagarPanchal can you give some reference sites for giving suggestions in through right click menu.The one you referenced has its own suggestions. – Nagaraju May 08 '14 at 05:06
@SagarPanchal I checked it. It has its own suggestion generation. – Nagaraju May 08 '14 at 05:18
@Raju, you want your own suggestion list ? – SagarPPanchal May 08 '14 at 05:20
Yes and Iam stuck at showing in them in right click menu – Nagaraju May 08 '14 at 05:21

Greg Burghardt · Answer 3 · 2014-05-08T13:12:30.637

2

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

It doesn't build the whole menu, but it does give you the misspelled word on right click.

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: In order to create the suggestions menu, you will need to use AJAX.

edited May 08 '14 at 13:12

answered May 07 '14 at 12:55

Greg Burghardt

17,900
9
49
92

Iam stuck at showing suggestions menu @Greg Burghardt – Nagaraju May 08 '14 at 05:37
Hey @Raju! I think this is a good way to go. You just need to use some plugin to actually render drop-down menus for misspelled words. You can use something like this: http://jqueryui.com/menu/ for example. And you can load list of suggestions via AJAX as Greg proposed. – Slava Fomin II May 11 '14 at 14:38
@SlavaFominII I was already using AJAX and now i had created my menu using document.createElement('menu') which is not working in chrome. Link:http://stackoverflow.com/questions/23559003/menuitem-and-contextmenu-crossbrowser-compatability – Nagaraju May 12 '14 at 05:19

showing suggestions for spell checker in content-editable div

3 Answers3