Going directly to posts in WP Search Suggest

I have no idea. Honestly.
I tried to return html tags that hold the permalink to the posts – but the script doesn’t interpret it correctly and displays the URLs as results when you search for ‘href’ etc.

I just don’t see how I could attach that information to the tile results. Suggestions are welcome here ??

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.

Yeah, but filling the gap is the real problem here. So we’re back to the PHP. ??
As I said – I have no idea how I can attach information to the search results, that the suggest script doesn’t interpret as part of the result.

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?

That’s actually exactly what I did.
But as you pointed out (and as I mentioned above) the jQuery suggest plugin interprets the html as search result.
So when you search for ‘hr’ it highlights the href attribute and the links within it. ??

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!

Figured it out! Peep this…

In wp-search-suggest.php change:

$results[] = $post->post_title;

to…

$results[] = '<span class="result" id="?p=' . $post->ID . '">' . $post->post_title . '</span>';

Then this is my wpss-search-suggest.js:

jQuery(function($){
	$('#s').suggest(
		wpss_options.ajaxurl,
		{
			resultsClass: 'big-results ac-results',
			selectClass: 'results-over',
			matchClass: 'results-match',

			onSelect:function(){
				$('#searchform1').trigger(location.href = $('.result').attr('id'));
			}
		}
	);
});

My file is probably different than yours, but #s coordinates with the input and #searchform1 coordinates with the form. I’ve changed the classes for easier styling with my CSS; that’s totally optional for you.

I had formatting issues when I tried using get_permalink() so that’s why I went with ?p= and the post ID. Part of the link URL was showing up in the suggestion and it was messed up. Hopefully the redirect to the permalink isn’t too big of a deal.

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.

Now it works. Here’s the full thing:

In wp-search-suggest.php change: $results[] = $post->post_title;

To: $results[] = '<span id="?p=' . $post->ID . '">' . $post->post_title . '</span>';

And make this your wpss-search-suggest.js:

jQuery(function($){

	$('#s').suggest(
		wpss_options.ajaxurl,
		{
			resultsClass: 'big-results ac-results',
			selectClass: 'results-over',
			matchClass: 'results-match',

			onSelect:function(){
				$('.results-over span').addClass('result').trigger(location.href = $('.result').attr('id'));
			}
		}
	);
});

Where #s is the id of your input. You can change the classes if you want, but just make sure that results-over in both spots are the same.

Only thing I’d now like to improve is that the suggestions are a little laggy when loading… any way to speed it up?

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 PGrizz, I’m not really sure what the issue might be. I have it working on this site, so maybe you can take a look a it’ll help.

(The search on the homepage is broken half the time for some reason, not sure why. That’s why I linked you to a page. Type something like Pikachu in the search box.)

I can e-mail you my edited plugin files if you want too, just let me know.

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

Hey guys,

first of all, please excuse that I haven’t been very active here recently.

Adam, thank you so much for trying to find a solution for this functionality! I am impressed, that you actually got it working on your site.

I tried to implement it in the plugin, too. For now I won’t add the feature to it, though.

This is why:
As much as I’d love to be able to jump directly to the desired post, the tradeoff in user experience is just to big, possibly showing html in the search results.
Try searching for ‘id’ or ‘spa’ on your site and you’ll know what I mean.

I hope to able to add it to the plugin in the future, though, I haven’t given up on that yet. ?? Please keep up the good work!

Cheers
Konstantin

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.