The SpellCheck control, like most others in Web.UI, includes a powerful client-side API. The philosophy behind SpellCheck’s design is that as little as possible should be baked right into the control when it comes to visual interface, and that custom user experiences should be made as easy as possible via a powerful and versatile client-side API.
Below are some examples.
To check some text and see how many errors there are, we can do the following:
var text = "This is some text with spleling misteaks in it."
function spellComplete(result)
{
alert('SpellCheck complete: ' + Spell1.get_numErrors() + ' errors found.');
}
Spell1.Check(text, spellComplete);
Continuing from the above example, this is how we can go through the errors and see what they are:
for(var i = 0; i < Spell1.get_numErrors(); i++)
{
alert('Error number ' + i + ' is: ' + Spell1.getError(i));
}
We can expand the loop above to show the user what some alternatives might be for each of those errors:
var currentError;
function suggestHandler(result)
{
alert('You typed\'' + currentError + '\' but maybe you meant to type one of these: ' + result);
}
for(var i = 0; i < Spell1.get_numErrors(); i++)
{
currentError = Spell1.getError(i);
Spell1.getSuggestions(currentError, suggestHandler);
}
We can also use the client-side API to change errors in the text right where they appear. For instance, we could alter the above to simply replace every misspelled word with the first suggestion returned by SpellCheck:
var currentErrorIndex;
function suggestHandler(result)
{
text = Spell1.Change(text, null, currentErrorIndex, result[0]);
}
for(var i = 0; i < Spell1.get_numErrors(); i++)
{
currentErrorIndex = i;
Spell1.getSuggestions(currentError, suggestHandler);
}
In the above example, we’ve been passing around the text variable, which we defined ourselves. When SpellCheck’s ControlToCheck property is set, null can be passed instead of text to any method that requires it – the control will get the relevant text itself, and interventions will be made right on the text in question, whether it’s in a form field or any other DOM element.
We hope you find this useful. Let us know what you think.