Autocomplete with apple.com -like results
susheel_c - September 26, 2008 - 11:46
| Project: | Autocomplete Node Finder |
| Version: | 6.x-2.0 |
| Component: | Documentation |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Description
Hi,
I'm just wondering whether it would be possible for this module to pull up results in the same fashion as the search bars on apple.com or adobe.com?
If this is outside the scope of this module, do let me know (though I'd love some help on how to get this kind of search done). I'm a newbie when it comes to drupal. Any help / advice will be appreciated.
Regards,
Susheel Chandradhas
#1
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] = "".$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?
#2
my code examples were eaten by the filter but it doesn't matter since you don't have the nids anyway
#3
Daniel,
It feels like you've got a lot of enthusiasm for this project ... and what you've already contributed is brilliant.
Me, on the other hand - I'm actually a complete noob when it comes to drupal. I'm just getting my feet wet, but I really like the feeling of sand between my toes (if you know what I mean). :)
I'm wondering whether it would be possible to eventually bring up some content designed specifically for this purpose... Meaning, when the node is created, if we could look at specifying a couple of fields just for search (maybe an item description field, a thumbnail image, and a couple of links.)
Or maybe we can create a separate list of items, and then link them to relevant nodes? but then is that going away from what you've intended in your project, because you are interested in finding the nodes, in the end, right?
Looking through my comment, I'm beginning to wonder whether my expectations are a bit far-fetched...?
Either way, great work so far... and I hope you continue to keep it coming.
Cheers!
PS: Do pardon my lack of drupal lingo... I'm just beginning to acquire it.
#4
I just realised that I'd mistakenly marked version 6.x - 2.2 in my first comment. I'm actually on 5.x-2.1.... Is there hope?
;)
#5
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.
#6
Woo Hoo!
#7
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!
#8
Automatically closed -- issue fixed for two weeks with no activity.
#9
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...
#10
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>tagsTo 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.
#11
thanks daniel!!!
you are great!!!
#12
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?
#13
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)
#14
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)
#15
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
#16
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?
#17
@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.
#18
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
#19
Might need to visit the theme page to clear your theme cache?
#20
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.
#21
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.
#22
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?
#23
This means you pressed something while the ajax was in progress and interrupted it. That error is built into drupal's javascript - bit annoying.
#24
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.
#25
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.
#26
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..
#27
You will have to upgrade to 2.18, there was a bug. Or you can just leave out that 'if' statement.
#28
http://drupal.org/node/364168
#29
Automatically closed -- issue fixed for 2 weeks with no activity.