Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

showing suggestions for spell checker in content-editable div

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>
like image 507
Nagaraju Avatar asked May 05 '14 10:05

Nagaraju


3 Answers

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/

like image 65
GuyT Avatar answered Sep 22 '22 03:09

GuyT


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

like image 25
SagarPPanchal Avatar answered Sep 21 '22 03:09

SagarPPanchal


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.

like image 24
Greg Burghardt Avatar answered Sep 23 '22 03:09

Greg Burghardt