Bagaimana cara membuat pencarian autofill langsung?

22

Saat ini saya mencoba untuk membuat fungsi pencarian wordpress yang menunjukkan hasil langsung di bawah bilah pencarian. Ada contoh di situs web Bank Dunia (layar di bawah). Saya tidak mencari autofill seperti yang Anda temukan di Google.com yang melengkapi kata-kata yang Anda ketikkan, tetapi saya ingin itu untuk menemukan posting yang sebenarnya di situs.

Saya mencoba melakukan scrub melalui Wordpress Answers dan sumber daya serupa lainnya tetapi hanya mengalami penerapan pencarian tipe Google yang bukan apa yang saya cari. Bantuan atau poin apa pun di arah yang benar akan sangat dihargai.

cari sebelum

cari setelah

mmaksimalis
sumber
Apa yang Anda inginkan terjadi ketika pengguna mengklik saran? Cukup isi kotak pencarian dengannya?
Rarst
Membawa Anda ke pos terkait. Pengguna masih dapat mengetik dan mendapatkan hasil pencarian secara normal, hanya mengklik saran yang akan mengarahkan ke posting.
mmaximalist
Saya punya solusi cepat untuk mengisi, tetapi menghubungkan lebih bermasalah ... Akan memikirkannya.
Paling lambat

Jawaban:

20

Berikut ini menggunakan jQuery UI Autocomplete, yang telah disertakan di WordPress sejak 3.3. (Saya sudah meminjam format dari @Rarst : D).

Ini masih belum persis apa yang Anda cari, tetapi memberi Anda titik awal yang baik. Berikut ini menggunakan gaya jQuery UI dasar, tetapi Anda dapat menggunakan yang saat ini dikerjakan di trac dan menyebutnya dari folder plug-in Anda.

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();
Stephen Harris
sumber
12

Ok, ini akan menjadi contoh kode yang sangat mendasar yang menggunakan asli suggest.js, inti WP untuk Ajax dan mengikat ke bentuk pencarian default (dari get_search_form()panggilan yang tidak dimodifikasi ). Ini tidak persis seperti yang Anda minta, tetapi pencarian tambahan adalah rasa sakit yang luar biasa untuk menjadi sempurna. :)

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();
Jarang
sumber
0

Anda harus melakukannya menggunakan Ajax tentu saja, tetapi di sini ada masalah. Karena WordPress menggunakan MySQL, Anda mungkin terlalu menekankan server Anda dengan pencarian jika Anda mencoba untuk mengisi pencarian dengan permintaan Database nyata melalui Ajax, tetapi apa yang mungkin Anda lakukan adalah mengembangkan sistem di mana semua posting disimpan dalam satu "wp_options" besar. bidang dan kemudian ketika pencarian selesai Anda kueri dari itu alih-alih melakukan pencarian nyata. Tapi ingat Anda perlu memperbarui potongan teks / variabel serial ini setiap kali Anda membuat atau mengedit posting.

Jika Anda tidak mau meluangkan waktu untuk mengembangkan solusi ini, saya tidak akan merekomendasikan Anda melakukan semacam ini "pencarian langsung".

Webord
sumber
2
Dalam kasus penggunaan seperti itu, penggunaan sumber daya permintaan MySQL akan sama sekali tidak signifikan dibandingkan dengan pemuatan inti WP untuk permintaan Ajax.
Paling lambat
1
Bergantung pada bagaimana Anda mencoba melakukan Permintaan Ajax, dalam hal ini Anda tidak benar-benar membutuhkan semua inti WP untuk jawaban Anda, skenario kasus terbaik hanya dengan memuat $ wpdb dan mencari bidang Anda. Tapi setuju, menggunakan url WP Ajax utama keduanya bisa berubah menjadi masalah, jika tidak ditangani dengan baik.
Webord
1
Ya, saya hanya mencatat bahwa kinerja MySQL tidak akan menjadi hambatan (kecuali jika Anda masuk ke ratusan ribu posting dan semacamnya). Inti WP jauh lebih lambat. Jaringan juga lebih lambat.
Paling lambat
Ya, tetapi melakukan semacam Scalling dengan mesin WP Core jauh lebih mudah dan lebih cepat. Dengan mesin MySQL lebih lambat dan lebih sulit. Tetapi pada instalasi normal, saya setuju dengan Anda.
Webord