Comment créer une recherche de remplissage automatique en direct?

22

J'essaie actuellement de créer une fonction de recherche wordpress qui affiche les résultats en direct sous la barre de recherche. Vous trouverez un exemple sur le site Web Banque mondiale (écrans ci-dessous). Je ne cherche pas un remplissage automatique, comme vous le trouverez sur Google.com, qui complète les mots que vous tapez, mais je souhaite qu'il trouve les posts réels sur le site.

J'ai essayé de parcourir Wordpress Answers et d'autres ressources similaires, mais je n'ai rencontré qu'un seul type de recherche de type Google, ce que je ne cherche pas. Toute aide ou point dans la bonne direction serait grandement appréciée.

    
posée mmaximalist 20.02.2012 - 08:37
la source

3 réponses

19

Ce qui suit utilise la saisie semi-automatique de jQuery UI, intégrée à WordPress depuis la 3.3. (J'ai emprunté le format à @Rarst : D).

Ce n’est toujours pas ce que vous recherchez, mais vous donne un bon point de départ. Ce qui suit utilise le style de base de l'interface utilisateur jQuery, mais vous pouvez utiliser celui qui est actuellement élaboré sur le compte . et appelez-le depuis votre dossier de plug-ins.

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();
    
réponse donnée Stephen Harris 20.02.2012 - 17:56
la source
12

Ok, ce serait un exemple de code très basique utilisant suggest.js en natif, WP core pour Ajax et se liant au formulaire de recherche par défaut (à partir de get_search_form() call non modifié). Ce n'est pas précisément ce que vous avez demandé, mais la recherche incrémentale est une douleur énorme pour obtenir la perfection. :)

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();
    
réponse donnée Rarst 20.02.2012 - 13:15
la source
0

Vous devez le faire en utilisant Ajax bien sûr, mais ici il y a un problème. Puisque WordPress utilise MySQL, vous risquez de surcharger votre serveur de chercher si vous essayez de remplir la recherche avec les requêtes de base de données réelles via Ajax, mais vous pourriez développer un système dans lequel toutes les publications sont enregistrées dans un grand "wp_options". champ et puis quand une recherche est faite vous interrogez à partir de cela au lieu de faire une recherche réelle. Mais rappelez-vous que vous devez mettre à jour ce bloc de texte / variable sérialisée chaque fois que vous créez ou modifiez un article.

Si vous ne souhaitez pas consacrer un peu de temps à développer cette solution, je ne vous recommanderais pas de faire ce type de "recherche en direct".

    
réponse donnée Webord 20.02.2012 - 10:09
la source

Lire d'autres questions sur les étiquettes