Share

AutoField Snapshoot

AutoTextField or autoField is javascript class for creating auto suggestion input field like gmail or facebook, and required prototype.js version 1.6.0 or above. AutoTextField support mouseOver and some key: ENTER, TAB, END, HOME, UP, DOWN and ESCAPE.

Calling the class is simple: add new AutoField(fieldID, options) to the HEAD of HTML. In the example below, the fieldID is ‘compose_to’, with two options: script for Ajax request and className for CSS layout (you can find complete CSS sample for layout in demo page or download file).

<script language="javascript" type="text/javascript">
Event.observe(window, 'load', function() {
  new AutoField('compose_to', {script:'compose_to.php', className:'faceGmail'})
});
</script>

Or, using the power of dom:loaded prototype.js

<script language="javascript" type="text/javascript">
document.observe("dom:loaded", function() {
  new AutoField('compose_to', {script:'compose_to.php', className:'faceGmail'})});
</script>

View Demo

This class based on autocomplete.js by Antonio Ramirez (http://webeaters.blogspot.com).

Thank you for looking. Your suggestion and comment are welcome.