Add-on package for Wordpress Plugin Template and Wordpress Theme Template exclusively.
Typeahead integrates Twitter's typeahead with wordpress, providing a flexible way to add customization and functionality for post searches.
This package requires Composer.
Add it in your composer.json
file located on your template's root folder:
"amostajo/wordpress-search-typeahead": "1.0.*"
Then run
composer install
or
composer update
to download package and dependencies.
Add the following string line in your addons
array option located at your template's config file.
'Amostajo\Wordpress\TypeaheadAddon\Typeahead',
This should be added to:
config\plugin.php
on Wordpress Plugin Templateconfig\theme.php
on Wordpress Theme Template
Call typeahead_search()
function within your template, like this:
<div class"search">
<?php typeahead_search() ?>
</div>
Typeahead uses WP_Query to retrieve posts, you can modify the results of the search like this:
<div class"search">
<?php typeahead_search( [ 'post_type' => 'product' ] ) ?>
</div>
FILTER: addon_typeahead_query
Filters the arguments passed to WP_Query by default.
add_filter( 'addon_typeahead_query', 'filter_query' );
function filter_query ($args) {
// Array modifications
$args['post_type'] = 'product';
$args['posts_per_page'] = 10;
// Array is expected in return
return $args;
}
FILTER: addon_typeahead_post
Filters each WP_Post object returned by WP_Query.
If this is not modified, the add-on will convert the post result into a Post model (located in this package).
add_filter( 'addon_typeahead_post', 'filter_post' );
function filter_post ($post) {
// Transformation of post into custom model
$model = new MyModels\CustomPost();
// Array is expected in return
return $model->from_post( $post )->to_array();
}
FILTER: addon_typeahead_data
Filters final results. Receives the data as array and the search arguments (those used for WP_Query).
add_filter( 'addon_typeahead_data', 'filter_data' );
function filter_data ($data, $args) {
// Adding custom records in results
if ( $args['post_type'] != 'product' ) {
// Adding extra product
$data[] = MyProduct::find(999)->to_array();
}
// Array is expected in return
return $data;
}
All views located at the views
folder can be customized in your theme. Copy and paste them in your theme (same as you would do for plugin views) and modify them.
Things to consider:
<input type="text"
id="search-typeahead"
name="s"
placeholder="Search..."
class="default"
data-hint="1"
data-highlight="1"
data-source="<?php echo $source_url ?>"
data-template-empty="<?php echo $template_empty ?>"
data-template-suggestion="<?php echo $template_suggestion ?>"
data-onselect="1"
/>
data-onselect
will make results to redirect to post permalink once selected.
Try to keep the other data
attributes, modify them if needed.
The coding is a mix between PSR-2 and Wordpress PHP guidelines.
Search Typeahead is free software distributed under the terms of the MIT license.