Skip to content

Instantly share code, notes, and snippets.

@itzikbenh
Last active January 25, 2020 00:20
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save itzikbenh/0afc9a34b78e429b2a1fa668f4ea204b to your computer and use it in GitHub Desktop.
Save itzikbenh/0afc9a34b78e429b2a1fa668f4ea204b to your computer and use it in GitHub Desktop.
WordPress auto-complete post search by title with typeahead-bootstrap
function theme_styles()
{
wp_enqueue_style( 'boostrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' );
wp_enqueue_style( 'theme_css', get_template_directory_uri() . '/css/theme.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles' );
function theme_js()
{
wp_enqueue_script( 'bootstrap_js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'), '', true );
//Download from here - https://github.com/bassjobsen/Bootstrap-3-Typeahead
wp_enqueue_script( 'typehead__boostrap_js', get_template_directory_uri() . '/js/typeahead-bootstrap.js', array('jquery'), '', true );
wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery', 'jquery-ui-datepicker'), '', true );
wp_localize_script( 'theme_js', 'theme_data', array('site_url' => network_site_url( '/' )) );
}
add_action( 'wp_enqueue_scripts', 'theme_js' );
include( get_template_directory() . '/api/process-get-companies.php' );
//Endpoint for getting companies
function water_endpoints()
{
register_rest_route('companies/v1', '/companies/', array(
'methods' => 'GET',
'callback' => 'get_companies'
));
}
add_action( 'rest_api_init', 'water_endpoints' );
//I will leave the rest for you.
<input class="typeahead form-control" type="text" placeholder="Search..." data-provide="typeahead">
<?php
//NOTE - function.php expects it to be inside an api folder.
//I'm returning the post title inside of a link. Do it however you wish and adjust accordingly
//in the typeahead.js file
function get_companies(WP_REST_Request $request)
{
$companies = query_posts( array(
"post_type" => "company",
"s" => $request['q']
) );
$companies_names = [];
foreach( $companies as $company )
{
$permalink = get_post_permalink($company->ID);
$name = "<a class='company-link' href=$permalink>$company->post_title</a>";
array_push($companies_names, $name);
}
return $companies_names;
}
?>
(function($) {
$('.typeahead').typeahead({
//So we can render HTML inside the list
highlighter: function(item) {
return item;
},
updater: function (item) {
//redirect user on click
window.location.href = $(item).attr("href");
},
source: function (query, process) {
return $.get(theme_data.site_url + 'wp-json/companies/v1/companies', { q: query }, function (data) {
return process(data);
});
}
});
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment