Search Autocomplete

functions.php

<?php /** * Enqueue scripts and styles. * * @since 1.0.0 */ function ja_global_enqueues() { wp_enqueue_style( 'jquery-auto-complete', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.css', array(), '1.0.7' ); wp_enqueue_script( 'jquery-auto-complete', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js', array( 'jquery' ), '1.0.7', true ); wp_enqueue_script( 'global', get_template_directory_uri() . '/js/global.min.js', array( 'jquery' ), '1.0.0', true ); wp_localize_script( 'global', 'global', array( 'ajax' => admin_url( 'admin-ajax.php' ), ) ); } add_action( 'wp_enqueue_scripts', 'ja_global_enqueues' ); /** * Live autocomplete search feature. * * @since 1.0.0 */ function ja_ajax_search() { $results = new WP_Query( array( 'post_type' => array( 'post', 'page' ), 'post_status' => 'publish', 'nopaging' => true, 'posts_per_page'=> 100, 's' => stripslashes( $_POST['search'] ), ) ); $items = array(); if ( !empty( $results->posts ) ) { foreach ( $results->posts as $result ) { $items[] = $result->post_title; } } wp_send_json_success( $items ); } add_action( 'wp_ajax_search_site', 'ja_ajax_search' ); add_action( 'wp_ajax_nopriv_search_site', 'ja_ajax_search' );

global.js

/* globals global */ jQuery(function($){ var searchRequest; $('.search-autocomplete').autoComplete({ minChars: 2, source: function(term, suggest){ try { searchRequest.abort(); } catch(e){} searchRequest = $.post(global.ajax, { search: term, action: 'search_site' }, function(res) { suggest(res.data); }); } }); });

template.html

<form class="navbar-form" role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <div class="form-group"> <input type="text" name="s" class="form-control search-autocomplete" placeholder="Search"> </div> <button type="submit" class="fa fa-search"></button> </form>

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk