[This took me a while to figure out, so I'm offering it as a tip for future reference. If someone has any suggestions to alter this node title to make it more findable in search, please suggest away and I'll edit it.]

Scenario:

Let's take the one I'm working on as our example because it's easier to explain. http://dev.vocalvoter.com

I have a search form which looks up street addresses for anywhere in the country. In order to help get a perfect DB match, the 'street' field autocompletes.

However, as we add more and more counties to the database, especially in a country like Ireland, the autocomplete results get progressively less useful. For example, you may find a 'St Patrick's Street' in almost every medium-sized town in Ireland, but you probably won't find more than ten in any given county.

So I altered the autocomplete handler. It takes a first argument - the numeric ID of a county - and now returns only search queries from within that area.

Altering the form with Javascript

Next we change the output of the form_api renderer. I add a <select> box containing the names and IDs of the counties (which are held in an array called $counties), and attach an onChange attribute to the field. That onChange alters the value of the hidden field called 'edit-search-autocomplete', which holds the autocomplete URL path for this form. Critically, I need to refer to both these fields by new JS variables, because Drupal's form element IDs contain dashes and in javascript that's problematic because it's a 'minus' operator. Adding the Javascript handler looks like this:

<?php
  $form['county'] = array('#type' => 'select', '#title' => t('County'),
    '#default_value' => $node->county, '#options' =>  $counties, '#weight' => -2, 
    '#attributes' => array('onChange' => "auto=getElementById('edit-search-autocomplete');county=getElementById('edit-county');
    auto.value='http://dev.vocalvoter.com/street/autocomplete/'+county.value;"));
?>

No worky.

Excellent. Now when the dropdown changes, the value of the hidden field is changed too.

Except it doesn't work. The autocompleting field hasn't picked up your change. Why not?

Solution

The autocomplete magic was actually handled by an onLoad event, which read the hidden field's value before you got around to selecting something in the dropbox. So changing it has no effect.

What needs to happen now is for you to reinitialise that autocomplete handler as the hidden field is changed so the autocompleting field picks up the alteration.

You need to add 'autocompleteAutoAttach()' as a final command to your onChange attribute. This forces the browser to fix the form as it changes, by calling autocomplete's form alteration routine again each time you pick a new county.

As you can see from the demo URL above, this finally does the trick.

Congratulations. If like me you have unwieldily-large searches to perform with autocomplete, you now have a means to make it less useless for the end-user.

Comments

robertgarrigos’s picture

Great!. I wanted to do this. Thanks to share it.

---
Robert Garrigos
Professional site: robert.garrigos.cat
Catalan Drupal Users Group: drupal.cat

wanderingstan’s picture

I can't get this to work and i suspect it's because of changes in drupal 5.

The first change is that you can't use just autocompleteAutoAttach(), you must use a full Drupal.autocompleteAutoAttach();

The problem is that the old handlers are still there. So you end up with 2 GET requests, one to the old handler and one to the new.

I'm still working on this, but would appreciate if anyone has any insight. I'm working on trying to wipe out all existing autocomplete events/objects before calling autocompleteAutoAttach() which will build them fresh again.

victorkane’s picture

For an intranet project I have I needed to do this in Drupal 5.1, so I did it with jQuery, CCK and views.

My workaround was to send the old handlers to the bit bucket.

See my writeup at http://groups.drupal.org/node/3471.

I would be very interested if you make progress addressing the existing autocomplete objects (jsAC objects). I cannot find them on the DOM: perhaps it would be possible to iterate over them and null-ify them or something.

If the writeup is not clear, feel free to mail me offlist (via contact form, for example).

Victor Kane
http://awebfactory.com.ar

revival’s picture

Hi there

Would it be possible to post the whole code to generate that page for the Ireland street names? It would be great to have something complete to work with for us novices :)

Thanks

dalad’s picture

Some suggestions on how to achieve the result using drupal 6, as I found nothing about this in a while

http://digitalillusion.altervista.org/wordpress/2009/01/12/drupal-6-link...

kpv’s picture