Como criar uma pesquisa de preenchimento automático ao vivo?

22

Atualmente, estou tentando criar uma função de pesquisa do wordpress que mostra resultados ao vivo abaixo da barra de pesquisa. Há um exemplo no site Banco Mundial (telas abaixo). Não estou procurando um preenchimento automático como você encontraria no Google.com, o que completa as palavras que você digita, em vez disso, quero que ele encontre postagens reais no site.

Eu tentei fazer um scrub através do Wordpress Answers e de outros recursos semelhantes, mas corri apenas para implementar uma pesquisa do tipo do Google que não é o que estou procurando. Qualquer ajuda ou pontos na direção correta seria muito apreciada.

    
por mmaximalist 20.02.2012 / 08:37
fonte

3 respostas

19

O seguinte usa o preenchimento automático de UI do jQuery, que foi incluído no WordPress desde 3.3. (Eu pedi emprestado o formato de @Rarst : D).

Ainda não é exatamente o que você procura, mas oferece um bom ponto de partida. O seguinte usa o estilo básico da interface do usuário do jQuery, mas você pode usar o que está atualmente funcionando no trac e chame isso da sua pasta de 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();
    
por Stephen Harris 20.02.2012 / 17:56
fonte
12

Ok, isso seria um código de exemplo muito básico que usa suggest.js nativo, núcleo WP para Ajax e se vincula ao formulário de pesquisa padrão (de get_search_form() chamada não modificada). Não é precisamente o que você pediu, mas a busca incremental é uma enorme dor para ficar perfeito. :)

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();
    
por Rarst 20.02.2012 / 13:15
fonte
0

Você deve fazer isso usando o Ajax, é claro, mas aqui há um problema. Como o WordPress usa o MySQL, você pode sobrecarregar o seu servidor com a pesquisa se você tentar preencher a pesquisa com as consultas reais do banco de dados através do Ajax, mas o que você pode fazer é desenvolver um sistema onde todos os posts são salvos em um grande "wp_options" campo e, em seguida, quando uma pesquisa é feita você consulta do que em vez de fazer uma pesquisa real. Mas lembre-se de que você precisa atualizar esse trecho de texto / variável serializada toda vez que criar ou editar um post.

Se você não estiver disposto a gastar algum tempo para desenvolver essa solução, não recomendaria esse tipo de "pesquisa ao vivo".

    
por Webord 20.02.2012 / 10:09
fonte

Tags