Typecast 1.4 (release)

The Input Field Augmentation Library

Implementation

The idea behind Typecast is to make implementation as simple and as unobtrusive to the markup as possible.

Step 1: Configure it

For the most part you should be able to get up and running with very little (if any) need to configure Typecast. The one thing you'll more than likely need to configure are the auto-complete/suggest dictionaries. Typecast comes with a few by default but they're there more for the purpose of demonstrating the functionality than being very useful. Typecast binds field to dictionaries by their id attributes so you'll need to make sure that your dictionaries use the same name as the field you want to bind them to. If Typecast can't find a dictionary with the same id as the field you want to add an Auto-Complete/Suggest behaviour to, it will bind to the Default dictionary. You can change the contents of the Default dictionary but DON'T DELETE IT! You'll break the code if you do!

Typecast.Config = {
	...
	...
	Data : {
		Dictionaries : {
			Default : ["aah", "aardvark", "aardvarks", "abacus",...
			fname : ["Ara", "Jack", "Bono", "Robert", "Mark", "Marc",...
			...
			...

Step 2: Including the library

Include the core Typecast library file and the Typecast config file into the head of your HTML document like so:

<script type="text/javascript" src="typecast.js"></script>
<script type="text/javascript" src="typecast.config.js"></script>
			

Step 3: Load it up

Wire up the Typecast.Init() method by either using the following code or some other variation (such as the Yahoo! UI Library addListener() method).

<script type="text/javascript">
	window.onload = go;
	function go(){
		Typecast.Init();
	}
</script>

Step 4: Create your fields

Adding Suggest/Auto-Complete functionality to a field is as simple as adding class="TCSuggest" to the field and making sure that it's id corresponds to a dictionary in the config file.

<input type="text" id="fname" class="TCSuggest" />
<input type="text" id="lname" class="TCSuggest" />
<input type="text" id="country" class="TCSuggest" />

Adding Mask functionality is even easier since you don't need to worry about a corresponding dictionary. Your mask is defined again through the rel attribute. You may also want to include a corresponding value in the value attribute to give people a hint as to what they need to type. By default, the # character denotes a number from 0 to 9 and the A character denotes a letter from A to Z.

<input type="text" class="TCMask[(###) ###-####]" value="(___) ___-____" />
<input type="text" id="dob" class="TCMask[##/##/####]" value="mm/dd/yyyy" />
<input type="text" id="ccard" class="TCMask[#### #### #### ####]" value="#### #### #### ####" />
<input type="text" id="postal" class="TCMask[A#A #A#]" value="A#A #A#" />

For more complex masks however, you may choose to define them directly in the typecast.config.js file like so:

Typecast.Config = {
	...
	...
	Data : {
		Mask : {
			Masks : {
				fax : "(###) ###-####,(   )    -    "
			...
			...
Creative Commons License
This work is licensed under a Creative Commons Licence.