Come creare la ricerca automatica del riempimento automatico?

Attualmente sto cercando di creare una funzione di ricerca wordpress che mostri risultati in tempo reale sotto la barra di ricerca. C'è un esempio sul sito web della Banca mondiale (schermate di seguito). Non sto cercando un riempimento automatico come quello che potresti trovare su Google.com che completa le parole digitate, piuttosto voglio che trovi i post effettivi sul sito.

Ho provato a fare uno scrub con Wordpress Answers e altre risorse simili ma mi sono imbattuto solo nell'implementazione di una ricerca di tipo Google che non è quello che sto cercando. Qualsiasi aiuto o punto nella giusta direzione sarebbe molto apprezzato.

Quanto segue utilizza il completamento automatico dell'interfaccia utente jQuery, che è stato incluso in WordPress dal 3.3. (Ho preso in prestito il formato da @Rarst : D).

Non è ancora esattamente quello che stai cercando, ma ti dà un buon punto di partenza. Quanto segue utilizza uno stile di base dell'interfaccia utente jQuery, ma è possibile utilizzare quello attualmente elaborato su trac e chiamarlo dalla cartella del plug-in.

class AutoComplete {

    static $action = 'my_autocomplete';//Name of the action - should be unique to your plugin.

    static function load() {
        add_action( 'init', array( __CLASS__, 'init'));
    }

    static function init() {
        //Register style - you can create your own jQuery UI theme and store it in the plug-in folder
        wp_register_style('my-jquery-ui','http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css');    
        add_action( 'get_search_form', array( __CLASS__, 'get_search_form' ) );
        add_action( 'wp_print_footer_scripts', array( __CLASS__, 'print_footer_scripts' ), 11 );
        add_action( 'wp_ajax_'.self::$action, array( __CLASS__, 'autocomplete_suggestions' ) );
        add_action( 'wp_ajax_nopriv_'.self::$action, array( __CLASS__, 'autocomplete_suggestions' ) );
    }

    static function get_search_form( $form ) {
        wp_enqueue_script( 'jquery-ui-autocomplete' );
        wp_enqueue_style('my-jquery-ui');
        return $form;
    }

    static function print_footer_scripts() {
        ?>
    <script type="text/javascript">
    jQuery(document).ready(function ($){
        var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
        var ajaxaction = '<?php echo self::$action ?>';
        $("#secondary #searchform #s").autocomplete({
            delay: 0,
            minLength: 0,
            source: function(req, response){  
                $.getJSON(ajaxurl+'?callback=?&action='+ajaxaction, req, response);  
            },
            select: function(event, ui) {
                window.location.href=ui.item.link;
            },
        });
    });
    </script><?php
    }

    static function autocomplete_suggestions() {
        $posts = get_posts( array(
            's' => trim( esc_attr( strip_tags( $_REQUEST['term'] ) ) ),
        ) );
        $suggestions=array();

        global $post;
        foreach ($posts as $post): 
                    setup_postdata($post);
            $suggestion = array();
            $suggestion['label'] = esc_html($post->post_title);
            $suggestion['link'] = get_permalink();

            $suggestions[]= $suggestion;
        endforeach;

        $response = $_GET["callback"] . "(" . json_encode($suggestions) . ")";  
        echo $response;  
        exit;
    }
}
AutoComplete::load();

Ok, questo sarebbe un codice di esempio molto semplice che utilizza nativo suggest.js, core WP per Ajax e si lega al modulo di ricerca predefinito (da get_search_form()chiamata non modificata ). Non è esattamente quello che hai chiesto, ma la ricerca incrementale è un grande dolore per essere perfetta. :)

class Incremental_Suggest {

    static function on_load() {

        add_action( 'init', array( __CLASS__, 'init' ) );
    }

    static function init() {

        add_action( 'wp_print_scripts', array( __CLASS__, 'wp_print_scripts' ) );
        add_action( 'get_search_form', array( __CLASS__, 'get_search_form' ) );
        add_action( 'wp_print_footer_scripts', array( __CLASS__, 'wp_print_footer_scripts' ), 11 );
        add_action( 'wp_ajax_incremental_suggest', array( __CLASS__, 'wp_ajax_incremental_suggest' ) );
        add_action( 'wp_ajax_nopriv_incremental_suggest', array( __CLASS__, 'wp_ajax_incremental_suggest' ) );
    }

    static function wp_print_scripts() {

        ?>
    <style type="text/css">
        .ac_results {
            padding: 0;
            margin: 0;
            list-style: none;
            position: absolute;
            z-index: 10000;
            display: none;
            border-width: 1px;
            border-style: solid;
        }

        .ac_results li {
            padding: 2px 5px;
            white-space: nowrap;
            text-align: left;
        }

        .ac_over {
            cursor: pointer;
        }

        .ac_match {
            text-decoration: underline;
        }
    </style>
    <?php
    }

    static function get_search_form( $form ) {

        wp_enqueue_script( 'suggest' );

        return $form;
    }

    static function wp_print_footer_scripts() {

        ?>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('#s').suggest('<?php echo admin_url( 'admin-ajax.php' ); ?>' + '?action=incremental_suggest');
        });
    </script><?php
    }

    static function wp_ajax_incremental_suggest() {

        $posts = get_posts( array(
            's' => $_REQUEST['q'],
        ) );

        $titles = wp_list_pluck( $posts, 'post_title' );
        $titles = array_map( 'esc_html', $titles );
        echo implode( "\n", $titles );

        die;
    }
}

Incremental_Suggest::on_load();

Devi farlo usando Ajax ovviamente, ma qui c'è un problema. Poiché WordPress utilizza MySQL, potresti sovraccaricare il tuo server di ricerca se provi a riempire la ricerca con le query di database reali tramite Ajax, ma quello che potresti fare è sviluppare un sistema in cui tutti i post vengono salvati in un unico "wp_options" campo e quindi quando viene effettuata una ricerca si esegue una query da quello invece di fare una ricerca reale. Ma ricorda che devi aggiornare questo pezzo di testo / variabile serializzata ogni volta che crei o modifichi un post.

Se non sei disposto a dedicare del tempo allo sviluppo di questa soluzione, non ti consiglierei di fare questo tipo di "ricerca dal vivo".