How do I theme the autocomplete list?

Actually that theme function no longer exists. You can do equivalent code through the admin interface with the 'rewrite choices' setting, but ultimately the goal is to reinvent how autocompletes and choices in general are displayed - especially how you can control what is shown in the suggestions, there are some other issues regarding this. Telling people to go off and theme it hasn't been working out that well. And partially this change is to improve performance - there were too many places in the code where the options were being iterated for little bits and pieces like theming.

Hi Daniel,

can you give us one or two lines from a working rewrite choice to start ?
The goal would be to be able to:

(1) load the node object
(2) make each result a div container
(3) submit on klick/enter -> i think i have some js that i could add to the divs but that is probably not the way to go.

Fantastic work by the way. we are going to write out tutorials in both german/englisch, if you need any assistance with the documentation or whatever please let us know.

lol woops

I've made that change in the repository and it will appear in future releases.

I want to keep this issue open because there does need to be a way to theme the whole autocomplete list including header/footer or whatever, not sure that's possible, but I'll look into it.

can you give us one or two lines from a working rewrite choice to start ?
The goal would be to be able to:

(1) load the node object
(2) make each result a div container
(3) submit on klick/enter -> i think i have some js that i could add to the divs but that is probably not the way to go.

My best advice is to install the devel module and use the dpm() function on the incoming variables (these are mentioned on the settings page). Then you can see what is available.

<?php
dpm($display);
dpm($row);
return "temp";
?>

I think 'nid' is always there, and you can use the node_load() function to get the node object.

To do a simple node teaser do something like this:

<?php
  $node = node_load($row->nid);
  $teaser = node_view($node, TRUE);
  return drupal_render($teaser);
?>

It will look monged at first, here's a tip for the css - except prepend the selectors with something specific:

   #autocomplete li.selected {
     background: #eee;
     color: inherit;
   }
   #autocomplete li {
     white-space: normal;
     margin: 0;
   }
   #autocomplete ul.links,
   #autocomplete ul.links li {
     background: none;
   }
   #autocomplete p {
     margin: 0;
   }

Same code as used in http://drupal.org/node/1342234

For adding divs and stuff and getting more creative:

<?php
  $output = '';
  $node = node_load($row->nid);
  $output .= '<div class="my-finder-result">';
  $output .= check_plain($node->title);
  // Get creative, add what you want here.
  $output .= '</div>';
  return $output;
?>

To submit on click/enter, there is a setting for this in the element settings called 'autosubmit'.

Hi Daniel,

that helps a lot, thx.

I wrote a little tutorial. It is not 100% yet and english is not my first language so feel free to comment and make suggestions and requests.

English: http://www.dieupdater.de/node/109
German: http://www.dieupdater.de/node/106

I made one for D6 too, hope to release it soon.

@Daniel: If you like it, i will try to polish it a little bit so we can add it as "try out a demonstration".

I liked the write-up of john_the_noob, but it was very specific to your particular requirements. It should be more flexible to address other scenarios.

For example, me - I'm trying to achieve exactly what we see on the Finder project page ... an e-commerce site product finder with images, prices and "Add to cart" link. The problem is that in the new Commerce module Product (entity) and Product Display (node) are separated. So, then the question becomes how to display the image, the product title, the price and the "Add to Cart" link???

Thanks.

So, then the question becomes how to display the image, the product title, the price and the "Add to Cart" link???

Those are just things that happened to be part of the node teaser. Anywhere a node teaser of products appeared on the site - it looked like that.

Hi Drupalina,

please look again at my tutorial, it is not at all for my exact needs !
It includes a custom field + an image, taxonomy + d7 standard fields to make it easy to modify it yourself. I will have a look at drupal commerce next week and write a little follow-up.

@john_the_noob your tutorial was excellent! I think you should change your username to "john_the_coach" ;)

@drupalina john is right. there's several tutorials dealing on node_load() and $node->field_whatever and they don't talk about entities. that's something else.

you need to advance further. I'd advise you, but I should read more about that stuff myself.

Thanks john_the_noob, your tutorial gave me a good starting point.

One quick thing that would improve it and get rid of the static paths, change as below:

$imageurl = image_style_url('finder_style', $node->field_image[LANGUAGE_NONE][0]['uri']);

Obviously an image style that suits your needs would need to be setup first, but that is a more maintainable way than creating an image field specifically for the finder image.

Sorry @john_the_noob, the tutorial in http://www.dieupdater.de/node/109 is no longer available. Will you provide an alernate location?