Autocomplete with apple.com -like results

Oh man that's cool :D Hadn't seen that before.
I've accidentally put HTML into the autocomplete suggestions and it worked, so yes this easily possible, just not implemented.

The question is what kind of options do I give people about what they can do? The easiest thing for me would just be to create a hook so they can theme their own autocomplete suggestions or so that someone can build a function/module to make it easier for people to do a few preset layouts.

The only worry I have is that hooks implemented in other modules may not be called properly when I do the javascript callback ? Hopefully it's all fine.

PS if you want to have a go at hacking the module yourself for your own purposes look in the function autocomplete_node_finder_autocomplete() for $matches[$the_match] = $the_match; and try changing it to $matches[$the_match] = "

"; and styling the div somehow - if that works, try adding a html link in there to see if you can override the click-to-fill-form functionality with just a simple clicked link to go to another page. If that doesn't blow up then you can do anything.

Well actually not everything, because the call to the function that returns the results actually doesn't ask for matching Node IDs (instead, this is asked for after the form submit) so you have limited options for generating links (such as to purchase the product etc...).

So I'd actually have to provide another option for returning suggestions as unique nodes, not unique terms for this to work.

Any other ideas, or how you see this working, and how you'd like to configure it?

my code examples were eaten by the filter but it doesn't matter since you don't have the nids anyway

Yeah I'll make sure to update 5 if we put this in. I think the best way now actually is to give the option to display suggestions as a view - that is pretty much all that list is.

Have a look at 5.x-3.1, you can theme the autocomplete suggestions in that one.

Create a theme function like this:

<?php

function YOUR-THEME-NAME_autocomplete_node_finder_suggestion($match) {
  $output = ($match['hyphens'] ? $match['$hyphens'] .' ' : '') . $match['field']; // This is the default output.

  if ($match['form'] == 'autocomplete') { // we will override if the form is an autocomplete
    $suggestion = node_load($match['nid']);  // this loads the node object
    $output = node_view($suggestion, TRUE);  // this generates a teaser
  }

  return $output;
}

?>

return false/null to remove the suggestion

You can make it more complicated to get it to display what you want.

This is all experimental at this point, so no guarantees, but I've definitly seen it work!

how can we change the position and theme of the A.N.F? i want to use different shape and different search buttons? and also i want to change the color of suggestions and categorize the suggestions.. i am sorry for this simple question but i am new user...

preper - all of that can be done with basic CSS techniques.

For example, to change the button

#block-autocomplete_node_finder-0 input.form-submit {
  float: left;
  margin-top: 18px;
  margin-left: 3px;
  text-indent: -10000px; /* hide text */
  overflow: hidden; /* hide text */
  line-height: 0px; /* hide text */
  display: block; 
  width: 120px; /* width of bg image */
  height: 80px; /* height of bg image */
  background: blue url(images/my_button_image.gif) no-repeat left top;  
}

Might get some good help for specific ideas you have in the theming forums on drupal.org

Actually styling the autocomplete suggestions was a bit difficult though, because of the default styles. Start with this:

#autocomplete li.selected {
  background: #eee;
  color: inherit;
}
#autocomplete li {
  white-space: normal;
  margin: 0;
}

#autocomplete ul.links,
#autocomplete ul.links li {
	background: none;
}

Another tip is also to remove margins from <p> tags

To categorize the suggestion you might need to write a module that hooks into this one and manipulates the results. It is probably difficult and will slow down the results too much. I think the block config page gives some tips on how to hook into the module, if you can't do what you need - put a feature request up as a new issue.

thanks daniel!!!

you are great!!!

daniel one more quetion;

I want to make a search theme like drugs.com.. but i could't because I can't adjust the shape of the box,area of the submit button and the hidden words in search box when rollover on it.. i want to adjust them seperately but i don't know the names of them.. can you advise me something? or can you give me the names of all contents of Autocomplete node finder separately?

I don't understand your question exactly, but the autocomplete lists appear like this

<div id="autocomplete">
  <ul>
  <li><div>Suggestion 1</div></li>
  <li><div>Suggestion 2</div></li>
  <li><div>Suggestion 3</div></li>
  </ul>
</div>

next to the form input (as a sibling)

sorry I could't explain exactely, for example there are different contents of A.N.F like;

autocomplete-node-finder-keywords-0

autocomplete-node-finder-submit

autocomplete_node_finder-0

autocomplete-node-finder-keywords-0-wrapper

i couldn't solve for which one i must write css code to change only the submit buton or only the serach box.

For example i want to change the shape and color of the search box only, sould I write ;

#autocomplete-node-finder-keywords-0 {
color:#00000;
background: url (images/xxx.gif);
}

what should i do to separate these parts and change (with css codes) every component of A.N.F separately?

(not:I have attached a picture to show which parts I want to change and customize separately)

The autocomplete field is at :

#block-autocomplete_node_finder-0 input.form-autocomplete

The default autocomplete ring image is defined in my system.css like this:

html.js input.form-autocomplete {
background-image:url(../../misc/throbber.gif);
background-position:100% 2px;
background-repeat:no-repeat;
}
html.js input.throbbing {
background-position: 100% -18px;
}

dude get Firebug for Firefox.

Firefox getfirefox.com
Firebug getfirebug.com

learn how to use that it will tell you all this stuff

Sorry if I missed this - thanks for the code examples and suggestions for tweaking it, but what file does this code appear in? Sorry - I'm completely new at all this. And is there any detailed documentation for ANF? Or is it just a spit-and-bailing-wire module?

@danielb: Please make this into a documentation page; many of us have trouble implementing snippets and would really enjoy the help turning the output into something like the project page's screenshot.

hello!
..so i've placed that function (above) in my template.php file.

but suggestions still look the same. i know Ive got to do something more.. what would that be? (in order to display the teaser)// thank you tremendously

Might need to visit the theme page to clear your theme cache?

I've Placed :

<?php

function YOUR-THEME-NAME_autocomplete_node_finder_suggestion($match) {
  $output = ($match['hyphens'] ? $match['$hyphens'] .' ' : '') . $match['field']; // This is the default output.

  if ($match['form'] == 'autocomplete') { // we will override if the form is an autocomplete
    $suggestion = node_load($match['nid']);  // this loads the node object
    $output = node_view($suggestion, TRUE);  // this generates a teaser
  }

  return $output;
}

?>

at the top of my template.php file in my theme folder, renamed the "YOUR-THEME-NAME" to the name of my theme, and expected my auto complete node finder suggestions to appear as teaser, but they do not.. even after emptying my cache. if i add a couple of characters in the function, a message is displayed when i use the nodefinder, so i know its doing something.

any other steps i may be missing? thanks you greatly for you time.

No idea. You could try debugging it like so:

<?php

function YOUR-THEME-NAME_autocomplete_node_finder_suggestion($match) {

  drupal_set_message("<h3>In theme function</h3><pre>Match: ".print_r($match,true)."</pre><hr>");

  $output = ($match['hyphens'] ? $match['$hyphens'] .' ' : '') . $match['field']; // This is the default output.

  if ($match['form'] == 'autocomplete') { // we will override if the form is an autocomplete

    drupal_set_message("Form is autocomplete");

    $suggestion = node_load($match['nid']);  // this loads the node object

    drupal_set_message("Node is <pre>".print_r($suggestion,true)."</pre><hr>");

    $output = node_view($suggestion, TRUE);  // this generates a teaser
  }

  drupal_set_message("Output: ".htmlspecialchars($output));
  drupal_goto($_GET['q']);

  return $output;
}

?>

something like that - should tell you what the theme function is thinking as it's running.

If you never get the debug messages while trying to use the finder then the theme function is not being called when it needs to be.

Yea, so I beleive i am getting the debug, but, in regards to the autocomplete suggestions, i get this error :

An HTTP error 0 occurred. 
http://localhost/1project/autocomplete_node_finder/autocomplete/0

any idea?

This means you pressed something while the ajax was in progress and interrupted it. That error is built into drupal's javascript - bit annoying.

Same issue as #20: adding the function to my template doesn't display teaser in results.
Trying the debug code generate the same error as #22.

I don't know why that is. Either it's in the wrong place, not called the right thing, or you haven't emptied your theme cache.

I've seen that the same code is commented in the module itself: I've tried to uncomment it, to clear drupal cache, browser cache, run cron, but I still can't see teaser in my suggestions..
the only way to see something changing is to comment out the "if ($match['form'] == 'autocomplete')" statement.. In this way I can finally see the teaser..

You will have to upgrade to 2.18, there was a bug. Or you can just leave out that 'if' statement.

http://drupal.org/node/364168