Facebook Like Auto-Suggestion Text Field
Posted in Javascript on April 11th, 2009 – Tags: ajax – 4 CommentsAutoTextField 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>
This class based on autocomplete.js by Antonio Ramirez (http://webeaters.blogspot.com).
Thank you for looking. Your suggestion and comment are welcome.



This is a great script! :) Very consistent. Thank you for putting it up.
My pleasure. I just modified Antonio Ramirez (Webeater) ‘s works and shared it here.
Very straightforward and clean. Thank you for sharing!
One challenge: how should I go about replacing the xml array with a php database connection? My list is considerably long (cities worldwide) and dynamic, it would be counterproductive to download the xml periodically.
Any thoughts?
Thanks
Hi Jhonatan,
1#
In the example (download archieve), I use “compose_to.php” to generate xml. You can edit that file or create a new “cities.php” file, where you can manipulate data from database. Don’t forget to change Options.script when initiating AutoField in the main file (index.php)
Event.observe(window, 'load', function() {new AutoField('compose_to', {script:'cities.php', delay:10})});2#
By default, AutoField will cache the result (xml) from ajax query. To disable this option, just add “cache:false” to the line of javascript mentioned above
Event.observe(window, 'load', function() {new AutoField('compose_to', {script:'cities.php', delay:10, cache:false})});3#
Considering it’s a list of cities: do you require others input? whether it’s country, state, or both. Unfortunately AutoField does not have such features. It will need little tweak to the main script (javascript/autofield.js).
Best,