Hi there,

I'm creating an application where I generate some HTML <input> fields
on the fly using PHP/JS, based on the amount of data stored in the
user's session.  I'm wanting to listen for the "onchange" event for
various <input> fields each with unique ID values so that I can create
an Ajax.Autocompleter, in the hopes that the up/down and enter keys
can still be used for navigating the suggested list.

Currently I'm adding this line after the <input> fields in question
are generated, where ctr is an incrementing value:

Event.observe("charity_"+ctr, "change", suggestNames);

My suggestNames() function is as follows:

function suggestNames(e)  {
        charityNameDivId = Event.element(e).identify();
        listNameDiv = charityNameDivId + "_suggestions";
        url = BASE_URL + "disbursement/suggested_donee_list"; // this
retrieves the <ul> from a PHP page

        new Ajax.Autocompleter(charityNameDivId, listNameDiv, url,
{ paramName: 'partialName', minChars: 0, afterUpdateElement:
getSelectedId } );

When the user makes the selection the getSelectedId() function is
called, which looks like:

function getSelectedId(text, li)
        postBodyContents = "id="+li.id;

        // retrieve the full details for donee from database
        new Ajax.Request(BASE_URL+"disbursement/donee_details/", {
                method: 'post',
                postBody: postBodyContents,
                onSuccess: function(transport) {
                        data = transport.responseText.evalJSON(); // the PHP 
file returns
JSON string

                        // populate the form fields -- charityNameDivId passed 
suggestNames(e) above
                        $(charityNameDivId + "_address").value = 
                        $(charityNameDivId + "_cra").value = data.CRANum;

                        // update hidden doneeID field
                        $(charityNameDivId+"_ID").value = li.id;
                onFailure: function() {
                        alert("<?php echo 
$this->lang->line('errors_db_retrieval'); ?>");

Unfortunately the auto suggest list seems to be sporadic (usually have
to clear everything in the <input> field before "onchange" fires), and
the getSelectedId() is not firing (add an alert at the top of the
function to see if it is being called).

Note: the database table from which the suggested list is drawn has
83,000+ entries.  However, only the top 10 results are returned to the
auto suggest list.  I suspect that these repeated calls to the
database are causing the slow/none performance.

Is my approach of adding the Event.observe() to force the creation of
the Autocompleter after the <input> fields are created a good way to
do things?

I would appreciate any and all feedback!


You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to