Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Going directly to a post by hitting return in an autosuggest list WordPress


This [[LINK href=""]]search auto-suggest plugin[[/LINK]] grabs a list of entries using jQuery ajax, but it's got one shortcoming: clicking or hitting enter on a suggested result, instead of taking you to that entry, submits a search for that title.

e.g., I search "cuckoo" and get a dropdown list including "One Flew Over the Cuckoo's Nest", one of my post titles. When I click on it or arrow down and hit enter, it submits a search, ?s=One+Flew+Over+the+Cuckoo%27s+Nest

How do I change the action on click/enter to make it take me directly to the desired post?

Relevant code parts (I think) are here (the rest of the code is at the link above):

PHP that creates the result list:
foreach ( $query->posts as $post ) {
$results[] = $post->post_title;
// then a filter is applied, and then this:
echo join( $results, "\n" );

and this is the entirety of the js:

Answers (3)


Christianto answers:


Base on Denzel code :D
I use post permalink instead of guid.
please simplify the code on line 176 become

foreach ( $query->posts as $post ){

$title = $post->post_title;

$link = get_permalink($post->ID);

$results[] = "<a href='$link'>$title</a>";


After that change plugin js file wpss-search-suggest.js with file attach..
this won't hack any wordpress build in javascript file, but will clear on any event that created by suggest.js. And make the area click-able.

web559 comments:

Thanks. Clicking the links now works (and permalinks are right), but hitting enter still puts the title in the search box. Do you know how to get enter to change the window.location/go directly to the post?

Christianto comments:


You mean when user type a search 'hello' and and enter it will go directly to the post?
There can be multiple result of 'hello' how can we determine which one is the page?

Btw, there are unexpected result produce by suggest.js, it will add <span> to the search link href attribute on query result. Your link will look like

<a href="http// <span class="ac-match">hello</span>" > <span class="ac-match">hello</span>" </a>

and result in 404error
Change the code above to
foreach ( $query->posts as $post ){

$title = $post->post_title;

$link = get_permalink($post->ID);

$results[] = "<a title='$link' >$title</a>";

and change wpss-search-suggest.js with file attach..
It will clean up the link before added to <a> as href attribute.