Bagaimana cara membuat pencarian autofill langsung?

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.

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();

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();

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".