Twitter Bootstrap have a javascript plugin called TypeAhead which is simular to Google Instant Search. I'm using it to pull the WordPress post titles into the search box, using the following code c/o @StephenHarris

    $posts = get_posts( array( 'numberposts' => -1, 'category' => 0 ) );
    $post_titles = wp_list_pluck( $posts, 'post_title' ); 
    $post_titles = array_map( 'esc_html', $post_titles ); 
    echo '"'.implode( '","', $post_titles ).'"';

But how would you link the post permalink to the drop-down list of post titles?

  • 3
    I wouldn't use that, looks very inefficient. What happens when you get to ~1K posts? :) There are many autocomplete plugins out there which perform better – onetrickpony Apr 4 '12 at 23:04
  • It's for a website that will only ever have a maximum of 100/150 posts. But I will look for some plugins options. – TheLoneCuber Apr 5 '12 at 2:40
  • ----deleted---- – kaiser Apr 5 '12 at 4:21
  • There is actually an excellent Wordpress plugin that provides autocomplete that is much smarter than just searching the titles: Swiftype Search – Joel Newcomer Mar 1 '13 at 13:02

As @OneTrickPoney points out, there's an alternative in core.

jQuery UI autocomplete comes with WP default install.

Autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

This can be used to enter previous selected values, for example you could use Autocomplete for entering tags, to complete an address, you could enter a city name and get the zip code, or maybe enter email addresses from an address book.

You can pull data in from a local and/or a remote source: Local is good for small data sets (like an address book with 50 entries), remote is necessary for big data sets, like a database with hundreds or millions of entries to select from.

Autocomplete can be customized to work with various data sources, by just specifying the source option.

Explanation @jQuery

Just enqueue and go. Take a look at my Q, where you'll find some basics about it.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.