Ticket #542: autocomplete.diff

functions.php

@@ -87 +87 @@
 
         add_filter( 'breadcrumb_trail_items',  __NAMESPACE__ . '\\breadcrumb_trail_items', 10, 2 );
 
+        add_action( 'wp_ajax_wporg_ajax_search', __NAMESPACE__ . '\\wporg_ajax_search' );
+        add_action( 'wp_ajax_nopriv_wporg_ajax_search', __NAMESPACE__ . '\\wporg_ajax_search' );
+
 }
 
 
@@ -429 +432 @@
         wp_enqueue_style( 'open-sans', '//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600' );
         wp_enqueue_style( 'wporg-developer-style', get_stylesheet_uri(), array(), '2' );
         wp_enqueue_style( 'wp-dev-sass-compiled', get_template_directory_uri() . '/stylesheets/main.css', array( 'wporg-developer-style' ), '20141026' );
+        wp_enqueue_style( 'jquery-ui-styles','http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' );
         wp_enqueue_script( 'wporg-developer-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
         wp_enqueue_script( 'wporg-developer-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
+        wp_enqueue_script( 'jquery-ui-autocomplete', '', array('jquery-ui-widget', 'jquery-ui-position'), '1.8.6' );
+        wp_register_script( 'wporg-autocomplete', get_template_directory_uri() .'/js/autocomplete.js', array( 'jquery', 'jquery-ui-core', 'jquery-ui-autocomplete' ), '0.1', true );
+        wp_localize_script( 'wporg-autocomplete', 'WPorgAutocomplete', array( 'search_url' => admin_url( 'admin-ajax.php' ), 'search_action' => 'wporg_ajax_search' ) );
+        wp_enqueue_script( 'wporg-autocomplete' );
 }
 
 /**
@@ -565 +573 @@
 
         return $content;
 }
+
+/**
+ * Ajax search for autocomplete
+ *
+ * @param string $term The string to search for
+ * @return string
+ */
+function wporg_ajax_search() {
+
+                parse_str( $_POST['data'], $data );
+
+                // Sanitize our post type values.
+                if ( ! empty( $data['post_type'] ) ) {
+                        if ( is_array( $data['post_type'] ) ) {
+                                $clean_types = array_map( 'sanitize_text_field', $data['post_type'] );
+                        } else {
+                                $clean_types = sanitize_text_field( $data['post_type'] );
+                        }
+                } else {
+                        // If there's no filter set, then we want to search all of them.
+                        $clean_types = array( 'wp-parser-hook', 'wp-parser-function', 'wp-parser-method', 'wp-parser-class' );
+                }
+
+                // Sanitize our search terms.
+                $clean_term = sanitize_text_field( strtolower( $data['s'] ) );
+
+                $suggestions = array();
+
+                $loop = new \WP_Query( array(
+                        's'         => $clean_term,
+                        'post_type' => $clean_types,
+                ) );
+
+                while( $loop->have_posts() ) {
+                        $loop->the_post();
+                        $suggestion          = array();
+                        $suggestion['label'] = esc_html( get_the_title() );
+                        $suggestion['link']  = esc_url( get_permalink() );
+                        $suggestions[]       = $suggestion;
+                }
+
+                wp_reset_query();
+
+        $response = json_encode( $suggestions );
+        echo $response;
+        exit();
+}
+

js/autocomplete.js

@@ +1 @@
+( function( $ ) {
+        $( document ).ready( function() {
+                $( 'input#s' ).autocomplete( {
+                        source: function( request, response ) {
+                                var form_data = $('form').serialize();
+                                $.post(
+                                        WPorgAutocomplete.search_url,
+                                        {
+                                                action: WPorgAutocomplete.search_action,
+                                                dataType: "jsonp",
+                                                data: form_data,
+                                        },
+                                        function( result ) {
+                                                response( JSON.parse( result ) );
+                                        }
+                                );
+                        },
+                        delay: 500,
+                        minLength: 3
+                } ) ;
+        } );
+} )( jQuery );

searchform.php

@@ -37 +37 @@
                 <div>
                 <label>
                         <span class="screen-reader-text"><?php _ex( 'Search for:', 'label', 'wporg' ); ?></span>
-                        <input type="text" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'wporg' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
+                        <input type="text" class="search-field" id="s" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'wporg' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
                 </label>
                 <input type="submit" class="shiny-blue search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'wporg' ); ?>">
                 </div>