Going directly to posts in WP Search Suggest

I suspect that the answer would have something to do with the javascript (wpss-search-suggest.js) as opposed to the PHP.

onSelect:function(){
$('#searchform').submit();

Instead of $('#searchform').submit();, something else would have to happen—something like

onSelect:function(){
window.location = ________;

where in place of ______ we get the permalink from the selected row.

Changing this line:
$results[] = $post->post_title;

to something like this:
$results[] = '<a href="' . get_permalink($post->ID) . '">' . $post->post_title . '</a>';

changes each result into a link (though some of the links are messed up, I don’t know why); but hitting enter or clicking on them does nothing. Does this give you any ideas?

Here’s an idea:

jQuery(function($){
	$('#s').suggest(
		wpss_options.ajaxurl,
		{
			onSelect:function(){
				$('#searchform').trigger(location.href = '/POST-SLUG/')
			}
		}
	);
});

Is there some way to generate the post slug of the selection? I know this may not be applicable for everyone, but on my site a lot of post URLs are basically just the title slugified w/ no prefix… and since we pull post titles, maybe there is a way to use it?

I dunno, I’m kind of a newbie at this. Maybe what eric suggested is the exact same thing. Just a thought!

Ugg. ALMOST works. Right now goes to very first result, no matter which one you select. It’s close to working though. Will look at it again in the morning.

Basically I think the fix is to remove the class="results" and add it in via jQuery as each result is highlighted. At the moment each result has the results class, so the function picks the id of the very first one.

Hey Adam, I’ve tried adding your edits on multiple themes including TwentyEleven by switching the wp-search-suggest.php file’s “$results[] = $post->post_title;” to “$results[] = ‘<span id=”?p=’ . $post->ID . ‘”>’ . $post->post_title . ‘</span>’;” and completely updating the wps-search-suggest.js file with the code posted above, but after making your changes it causes the suggest feature to stop working with no suggestions being shown.

I tried changing the #s on one theme to match, but that didn’t fix the problem. But I believe #s is the default input id for the search area on TwentyElven, where I still can’t get it to work properly.

Hey Adam I’d appreciate the email, you can send it to UNCCurtin@hotmail.com. But your saying that your edited version is broken half the time? =/

Hey Konstantin,

PGrizz and I e-mailed back and forth about that issue a little bit. I’ll copy one e-mail I sent and paste it below (we were discussing trying to add images to the results, a la IMDB):

Good call on the search trying to match the image URL! I didn’t pick up on that when I was testing. So basically the image will break as the search suggest tries to highlight the text in the URL (I guess it puts a <span> around the text.)

I’m realizing now I had actually come across the issue when I was trying to get the results to link. I was originally not using ?p=$post->ID, I tried using the permalink but it was breaking. I guess just using the ID got around that issue.

My images are all named the same as my post titles, so I don’t have the results issue you have, but here’s how I think both issues could be fixed:

$results = apply_filters(
‘wpss_search_results’,
$results,
$query
);

echo join( $results, “\n” );

That needs to be edited somehow. Like right now I think what it does is take the text of all the results plus your query, and put it through the search suggest jquery plugin. Then it shows the results.

I think we need to add the images in after it does the searching. Or maybe there’s some way to target which part of the text it tries to match. I’m not an expert on this though – maybe the plugin author knows more?

I just tried this out and it’s not quite right:

===

if ( ! empty($query->posts) ) {

foreach ( $query->posts as $post ) {
//$results[] = $post->post_title;
//$results[] = ‘<span id=”?p=’ . $post->ID . ‘”>’ . $post->post_title . ‘</span>’;
$postID = $post->ID;

$image_id = get_post_thumbnail_id( $postID );
$image_url = wp_get_attachment_image_src( $image_id, ‘thumbnail’ );
$image_url = $image_url[0];

$results[] = ‘<span id=”?p=’ . $postID . ‘”>’ . $post->post_title . ‘</span>’;
$images[] = ‘<img src=”‘ . $image_url . ‘” />’;
}

$results = apply_filters(
‘wpss_search_results’,
$results,
$query
);

$results = array_merge($results, $images);

echo join( $results, “\n” );
}

===

I’m trying to put the images into 1 array, then add them to the results array after it’s been queried. array_merge is the wrong function to use, if you posted on stackoverflow then maybe someone there might know the right way to do it. You need to add the values from the images array directly onto the end of each corresponding value for the results array. So like combine the values kind of.

I think that fixes the bogus results issue (which includes images), but the search suggest jquery is still trying to highlight the image text. I’m not sure how to fix that. It seems harder to avoid that problem. One solution might be to use more jquery and a regex to try and get rid of the styling after it tries to do it. You’d need to match <img … <span> … /> … </span> and delete the spans. (I assume the highlighting adds a span.) Or maybe try to eliminate the highlighting all together by editing the js file.

Oh and as far as styling the CSS, I had to just edit and refresh the page. No other way I could thinking of doing it because of the issue you stated.

Anyway, food for though! I may or may not add images to my search results. It’s not a huge priority for me, though it would be cool.

Maybe that’ll help you or someone else get the ball rolling.