Facebook Like Auto-Suggestion Text Field
Posted in Javascript on April 11th, 2009 – Tags: ajax – 4 Comments
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>
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,