|
|
|
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 :
| | <BODY onLoad="AutoC.activate();"> | |
|
|
| Zephyr: AJAX Based Framework for PHP5 Developers
Categories : PHP, AJAX, Frameworks, Java Script, Web Applications | | | 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 | | | 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 | | | Ajax - Perform a simple server side request and update the current HTML page.
Categories : AJAX, Java Script, Beginner Guides | | | 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 | | | javascript doesn't accept a fieldname with []
Categories : Java Script | | | Array values from javascript to php
Categories : PHP, Java Script, Arrays | | | Create HTML forms dynamicly using Javascript & PHP
Categories : PHP, PHP Classes, Java Script | | | Linked comboboxes with php-mysql & javascript
Categories : PHP, Java Script, Databases, MySQL | | | The toll booth
Categories : PHP, Java Script, Filesystem | | | MD5 secured login
Categories : PHP, Java Script, Authentication, Security | | | Flash Detection Script with loads of features
Categories : Java Script, Flash | | | Bypassing Plugin / FLASH Activation
Categories : Java Script, Web Browsers, Security, Flash | | | write an event to the eventlog via JScript
Categories : Java Script, Windows 2000 | |
|
|
|
