		Next

Ajax

Table of Contents

Autocompletion

http://www.symfony-project.org/book/trunk/11-Ajax-Integration#Autocompletion

A text-input component that shows a list of words matching the user's entry while the user types is called an autocompletion. With a single helper called input_auto_complete_tag(), you can achieve this effect.

Find an author by name:
<?php echo input_auto_complete_tag('author', 'default name',
  'author/autocomplete',
  array('autocomplete' => 'off'),
  array('use_style'    => true)
) ?>

This will call the author/autocomplete action each time the user types a character in the author field. It's up to you to design the action so that it determines a list of possible matches according to the author request parameter and returns them as an HTML item list in a format similar to Listing 11-30.

Example 1. Listing 11-30

<ul>
  <li>suggestion1</li>
  <li>suggestion2</li>
  ...
</ul>

The helper will then display the list under the author tag, and clicking one of the suggestions or selecting it with the keyboard will complete the input.

Simple autocompletion

http://www.symfony-project.org/forum/index.php/m/11894/

I am trying to kickstart an autocomplete field into life, modelled on the Askeet tag autocompleter.

In the Askeet example, form_remote_tag is used to create an entire form that is submitted via a background http op. However, to start with I want my form to be submitted in a standard POST action, just featuring the autocomplete field within it. Should I use a the standard form tag helper?

My template:

<?php echo form_tag('pallet/newtrunkSave', 'name=newtrunk') ?>
...
<?php echo input_auto_complete_tag('reg', '', 'pallet/autoVehicle', 'autocomplete=off', 'use_style=true') ?>
...
</form>

Added to the top of my routing.yml:

vehicle_autocomplete:
  url:   /vehicle_autocomplete
  param: { module: pallet, action: autoVehicle }

Created templates/autoVehicleSuccess.php:

<ul>
<?php foreach ($vehicles as $vehicle): ?>
  <li><?php echo $vehicle ?></li>
<?php endforeach; ?>
</ul>

Action to create ajax list in actions/autoVehicleAction.class.php:

<?php
class autoVehicleAction extends sfAction
{
  public function execute()
  {
    $this->vehicles = TmsVehiclePeer::getOwnVehiclesLike($this->getRequestParameter('reg'));
  }
}
?>

New code extending TmsVehiclePeer:

<?php
public static function getOwnVehiclesLike($vehicle, $max = 10)
  {
    $c = new Criteria();
    $c->clearSelectColumns();
    $c->addSelectColumn(TmsVehiclePeer::VEHICLEREF);
    $c->add(TmsVehiclePeer::VEHICLEREF, "${vehicle}%", Criteria::LIKE);
    $c->setLimit($max);
    $rs = TmsVehiclePeer::doSelectRS($c);

while ($rs->next())
{
  $vehicles[] = $rs->getString(1);
}

    return $vehicles;
  }
?>

The generated JS is thus:

<script type="text/javascript">
//<![CDATA[
new Ajax.Autocompleter('reg', 'reg_auto_complete', '/frontend_dev.php/vehicle_autocomplete', {});
//]]>
</script>

The problem is that I get this JS error in my FF1.5 console:

Error: Ajax.Autocompleter is not a constructor

I think I am 99% of the way there… help! Many thanks in advance.

documented on: 06 September 2006, halfer

Simple autocompletion

Having checked further sources, apparently a common solution is to ensure that the relevant prototype libraries are included. Further research reveals that the scriptaculous library might also be required to get this to work. However, this has not been included in my javascripts.

documented on: 06 September 2006, halfer

Simple autocompletion

I haven't personally tried the auto_complete but I'll give it a whirl when I get home tonight and see if I come across the same problem or not.

On a side note, I've found two tools very helpfull when dealing with javascript in particular.

One is an IDE for JS called Aptana which I find very usefull when writing JS as it has an active debugger which warns you of syntax erros and the like as you code. http://www.aptana.com/

The other, which you most likely already have but I'll mention none the less is the Extension for FireFox called FireBug, which I find invaluable especially when dealing with AJAX since you can view the entire DOM object even after requests. https://addons.mozilla.org/firefox/1843/

documented on: 06 September 2006, Draven

Simple autocompletion

I've not come across Firebug, I'll install it just now. I use the Web Developer toolbar on and off, and it is very good, but I am not sure it analyses the DOM after programmatic modifications.
my most useful one is definately Tamper Data. Great for SQL injection and testing validation. http://tamperdata.mozdev.org/

I use the web toolbar as well, but Firebug has been by far the most usefull FF extension I have found. I use it constantly.

A few others I find helpfull are Colorzilla, FireFTP and Gmail Space. https://addons.mozilla.org/firefox/271/ https://addons.mozilla.org/firefox/684/ https://addons.mozilla.org/firefox/1593/

Gmail Space allows you to use your gmail account to upload files and use your email storage like an FTP account. Great for transfering files back and forth from work.

documented on: 06 September 2006, Draven

Simple autocompletion

FOUND IT!

First you are correct, the effects library must be added before the Controls.js.

The second is an error in the docs. The docs show you using…

input_auto_complete_tag('states', '', 'test/getStatesList', 'autocomplete=off', 'use_style=true');

Change the call to

input_auto_complete_tag('states', '', 'test/getStatesList', array('autocomplete'=>'off'), 'use_style=true');

documented on: 11 September 2006, Draven

Simple autocompletion

That works absolutely fine, all I have to do is to tweak some CSS to give the pop-up some background colour, I'll be sorted.

I'll add a ticket to fix the doc error and the JS order issue.

documented on: 11 September 2006, halfer