Code Examples -> Activate an Ajax.Autocompleter with an onLoad Command

	Join us on FaceBook
	Submit Your Code
	Poker Tournaments
	Poker Guide for Developers
	SEO Monitor
	UpTime Monitor
	My Favorite Examples
	My Favorite Articles
	Update Your Profile

More Weber Sites
	PHP Code Search
	Web Development Forums
	Learn MySQL Playing Trivia
	PHPBB2 Templates
	Web Development Resources
	Web Development Content
	Internet Security Software

Recommended Links
	PHPClasses
	PHP Editor
	PHP Jobs
	Vision.To Design
	Ajax Tutorials
	PHP Programming Help
	PHP/MySQL Programming
	Webmaster Resources
	Webmaster Forum
	XML meta language
	website builder

Recommended
	פרייסז - הכח לקנות עובר לידיים שלך
	Texas Holdem Poker Evangelists


BACK		ADD A COMMENT		SEND TO A FRIEND		ADD TO MY FAVORITES		ADD CODE EXAMPLES		PRINT

PHP Code Examples

Title :	Activate an Ajax.Autocompleter with an onLoad Command
Categories :	Java Script, AJAX	Boaz Yahav
Date :	May 08th 2007
Grade :	2 of 5 (graded 4 times)
Viewed :	16642
File :	No file for this code example.
Images :	Image 1

Search :	More code by Boaz Yahav
Action :	Grade This Code Example
Tools :	My Examples List

Code

I'm using the Ajax.Autocompleter class from http://script.aculo.us/ at http://www.php-code-search.com.
I was looking for a way to activate the Autocompleter Div "manually" without having to actually type in the input field.

I looked all over the documentation and also tried to search for how this is done
and saw that this question is asked allot. This is why I added this code example.

In short, the answer can be found on line 155 of controls.js :

activate: function() {
this.changed = false;
this.hasFocus = true;
this.getUpdatedChoices();
},

Here you can see a working example which is almost identical to the http://www.php-code-search.com site:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax.Autocompleter Code Example</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="http://www.php-code-search.com/Style.css">
</HEAD>
<BODY STYLE="margin:0px 0px 0px 0px;" onLoad="document.CodeSearch.Code.focus();document.getElementById('Code').value='php';AutoC.activate();">
<script src="http://www.php-code-search.com/scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="http://www.php-code-search.com/scriptaculous/src/scriptaculous.js" type="text/javascript"></script>

<CENTER>
<H1 STYLE="font-family: arial,helvetica,verdana,sans-serif;font-size: 25pt;font-weight: bold;color: #000000;">PHP Code Search</H1>
<FORM NAME="CodeSearch" ACTION="http://www.php-code-search.com/AjaxSearchRedirector.php" METHOD="POST" STYLE="display:inline;">
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="width:800px;">
<TR>
<TD WIDTH="17"><SPAN ID="indicator1" style="display: none"><img src="http://www.php-code-search.com/images/indicator.gif" alt="Searching for php code..." WIDTH="16" HEIGHT="16"></SPAN></TD>
<TD ALIGN="CENTER" COLSPAN="2" STYLE="width:750px;">
<INPUT NAME="Code[example]" id="Code" type="text" STYLE="width:740px" autocomplete="off">
</TD>
<TD STYLE="width:33px;" ALIGN="RIGHT">
<INPUT TYPE="BUTTON" VALUE="Go" STYLE="cursor:pointer" onClick='return CheckSubmit(this);'>
</TD>
</TR>
</TABLE>
</FORM>
<div id="Code_update" class="auto_complete" ALIGN="LEFT"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
var AutoC = new Ajax.Autocompleter('Code','Code_update','http://www.php-code-search.com/Code_autocomplete_result.html',{minChars: 3, indicator: 'indicator1'});
// ]]>
</script>

<BR><BR><BR>
</CENTER>
</BODY>
</HTML>

Notice that you will need to change the domain www.php-code-search.com to your domain if you want this to work. You will also need the JavaScript code from http://script.aculo.us/downloads.

Now the whole point of this code example is to show how you can activate the DIV from the onLoad or any other JavaScript event :

Instead of just setting the Ajax.Autocompleter like most of the examples in the docs, do this:

var AutoC = Ajax.Autocompleter(....)

Now that we have the name of the object (AutoC) we only need the name of the function that does the activation and this is the activate() function. Just call it on any event you want like :

Related Code Examples

	Remote Scripting: send form POST data to a script and insert the results into a page without refreshing the page. Categories : PHP, AJAX, HTML and PHP, Java Script
	ezRemoteScripter - A little remote scripting (AJAX) helper Categories : PHP, Java Script, AJAX
	AJAX Data Grid System using php and mysql. A complete login system with the ability to display data in a grid using ajax. Add , update and delete the records without reloading the page. Categories : PHP, AJAX, Databases, MySQL, Java Script
	The Ajax Tree view class fetches data from a db for the requested parent category id. The data is then stored in an array and converted into JSON (Javascript Object Notation) format. This format is then used by JavaScript for populating tree view. Categories : PHP, PHP Classes, Java Script, AJAX, Databases
	Ajax - Perform a simple server side request and update the current HTML page. Categories : AJAX, Java Script, Beginner Guides
	Miguel Categories : AJAX, AJAX
	Zephyr: AJAX Based Framework for PHP5 Developers Categories : PHP, AJAX, Frameworks, Java Script, Web Applications
	AJAX XML HTTP Request - Compatible with almost browsers! Categories : AJAX, HTTP, Java Script
	Java Script which implements a Clock (Client Side) Categories : Java Script, Date Time
	Email Address Protection (Avoide SPAM) Categories : Java Script, Email, Encryption
	PHP Array to Javascript Object Categories : PHP, Arrays, Java Script
	Page Loading Message shown during the time your site's page is being loaded. Categories : HTML, CSS, Java Script
	JavaScript dropdown list menu to switch any page. Categories : Java Script, Beginner Guides, Form Processing
	AJAX Application Categories : PHP, AJAX, Databases, MySQL
	Builds JavaScript that updates the contents of one selector based on another. Categories : HTML, Java Script, PHP, Complete Programs, General