spell checker in jquery using php

In this programming tutorial we will learn how to perform spell checking in jquery using php. For this i will use a jquery plugin which is called jquery-spellchecker. By god, i have tried many spell checkers but there are lot of problems in them, some spell checkers that i like was not free of cost, some was not cross browser compatible then i found this spell checker which is pretty good. This jQuery plugin is used to check the spelling of a chunk of text, using google's spell checking service. The plugin also gives you the option of using pspell. If you are able to use pspell then you will have great control over your dictionary to manage spells of words. To communicate with google's api or pspell, php will be used.

The plugin comes with 2 default behaviours:

• If bound to a HTML element other than textarea, the plugin will highlight the incorrectly spelt words. Clicking on those incorrect words will bring up the suggest box.
• If bound to a textarea element, the plugin will add the incorrectly spelt words after the textarea. Clicking on those incorrect words will bring up the suggest box.

Server side script
As i told you above, the plugin uses PHP script that supports two type of spell checking engines: php's pspell extension for aspell, or google's spell checking services (API).

using pspell requires you to have aspell installed on the server, as well as the PHP pspell extension using google requires minimal server adjustments.
Note:-

The example PHP file uses the json_encode function, which requires the json package. This package comes default with PHP 5 >= 5.2.0. If you have an older version of PHP then you can install this package via PECL, or use a custom json library.

If you would like to use a different server side language, let's suppose asp.net then wait for my next tutorial, i have working example of this plugin with asp.net, jquery and google's spell checking api in my system and soon it will be uploaded in the form of tutorial.

Check chunk of text:-


checkspelling.php?engine=pspell
Request:
Content type: application/x-www-form-urlencoded;charset=UTF-8
Data: text="a chunk of text without any punctuation"
Response:
Content type: application/json
Example response: ["bbad","speltt","wwords"]
Get suggestions for a word:

checkspelling.php?engine=pspell

Request:
Content type: application/x-www-form-urlencoded;charset=UTF-8
Data: suggest="word"
Response:
Content type: application/json
Example response: ["suggest","snuggest","soggiest"]


Supported languages

Pspell

What is pspell??? Good question, ok :) Pspell is simply a php wrapper to the GNU aspell spell checker. So supporting large range of languages is as easy as installing the relevant aspell language dictionary. These dictionary packs are available in most GNU/Linux distro repositories. In debian/ubuntu, you can install a new dictionary in a following way:
sudo apt-get install aspell-LANG
(you have to replace LANG with the language code)

If you want to search for a particular language dictionary then you can use apt-cache:
sudo apt-cache search aspell


or view the aspell supported languages page.

Don't forget to restart apache after successfully installation of new dictionaries. If you having problems getting pspell to work with personal dictionaries, view the php errors!

Note:- Aspell also works like charm in windows

Google API
I couldn't find any information for the languages google supports, but probably there are lot of languages and in my next tutorial you will see that i will use asp.net with google api to perform spell checking via this jquery plugin.

Usage
Include the following in the head section of your html document:

<link href="css/spellchecker.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="js/jquery.js" type="text/javascript">
</script>
<script src="js/jquery.spellchecker.js" type="text/javascript">
</script>

Defaut usage

// initiate the spell checker on an element, fire the 'check' function
$("textarea#text-content").spellchecker("check");

Plugin options: (all optional)

$("textarea#text-content")
.spellchecker({
        url: "checkspelling.php",       // default spellcheck url
        lang: "en",                     // default language 
        engine: "pspell",               // pspell or google
        addToDictionary: false,         // display option to add word to dictionary (pspell only)
        wordlist: {
                action: "after",               // which jquery dom insert action
                element: $("#text-content")    // which object to apply above method
        },      
        suggestBoxPosition: "below",    // position of suggest box; above or below the highlighted word
        innerDocument: false            // if you want the badwords highlighted in the html then set to true
});

You only want to execute the above code after an event has occured:

// initiating the spell checker is not necessary if using the default plugin options
$("a.check-spelling").click(function(e){
        e.preventDefault();
        $("textarea#text-content").spellchecker("check");
});

This jquery plugin will fire off a callback function after it has finished checking words:

$("a.check-spelling").click(function(e){
        e.preventDefault();
        $("textarea#text-content").spellchecker("check", function(result){
                // if result is true then there are no incorrectly spelt words
                if (result) alert('There are no incorrectly spelt words.');
        });
});

And for removing all spellchecker html, just do the following:

$("textarea#text-content").spellchecker("remove");

Source
jquery.spellchecker

Simple Demo
Demo

So that's it. I hope you will love this spell checker in jquery using php.
I love your feedback.