phpguru.org

A CSS and Javascript AutoComplete

• Abstract
• Features
• Demo
• Requirements
• RGraph: HTML5 canvas graph library

A Javascript library which provides an auto-complete dropdown which you can attach to one or more form inputs (typically text inputs). It functions the same as the Internet Explorer auto-complete, and works in Internet Explorer and Firefox (tested on Internet Explorer, Firefox, Chrome, Safari and Opera).

You can download the code here.

Features

• Works on MSIE, Firefox, Chrome, Safari & Opera
• Easy setup.
• Multiple dropdowns per page.
• Provide your own data to populate the auto-complete (naturally).
• Can set the maximum number of items shown at once, with scrolling support.

Demo

You can either press a key whilst focused on the input box, or you can double click the input box. Just like Internet Explorers built in auto-complete.

Email:	Colour:
This is a test

The example illustrates how the auto-complete appears above dropdowns (combo boxes) - not usually the case for layers in Internet Explorer. Also, the second text box is readonly. This is totally optional and you can achieve it by setting the READONLY attribute on your form field.

Requirements

The AutoComplete widget works with all the major browsers:

• Internet Explorer 5 or higher
• Firefox 1.5 or higher
• Safari 2.0 or higher
• Opera 8.0 or higher

RGraph: HTML5 canvas graph library

If you're interested in web development, then you may also be interested in RGraph: HTML5 canvas graph library. It uses HTML5 features to produce a wide variety of graph types. Because it moves the creation of graphs from the server to the client, it can significantly reduce the load on your server and your bandwidth usage.