Làm thế nào để tạo tìm kiếm tự động điền trực tiếp?

Tôi hiện đang cố gắng tạo một chức năng tìm kiếm wordpress hiển thị kết quả trực tiếp bên dưới thanh tìm kiếm. Có một ví dụ trên trang web của Ngân hàng Thế giới (màn hình bên dưới). Tôi không tìm kiếm tính năng tự động điền như bạn tìm thấy trên Google.com để hoàn thành các từ bạn nhập, thay vào đó tôi muốn nó tìm thấy các bài đăng thực tế trên trang web.

Tôi đã thử thực hiện kiểm tra thông qua Câu trả lời của Wordpress và các tài nguyên tương tự khác nhưng chỉ chạy vào thực hiện tìm kiếm loại Google không phải là thứ tôi đang tìm kiếm. Bất kỳ trợ giúp hoặc điểm theo đúng hướng sẽ được đánh giá rất cao.

Phần sau đây sử dụng jQuery UI Autocomplete, đã được đưa vào WordPress kể từ 3.3. (Tôi đã mượn định dạng từ @Rarst : D).

Nó vẫn không chính xác những gì bạn đang theo đuổi, nhưng cung cấp cho bạn một điểm khởi đầu tốt. Phần sau đây sử dụng kiểu dáng UI UI cơ bản, nhưng bạn có thể sử dụng kiểu hiện đang hoạt động trên trac và gọi nó từ thư mục trình cắm thêm của bạn.

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, đây sẽ là mã ví dụ rất cơ bản sử dụng nguồn gốc suggest.js, lõi WP cho Ajax và liên kết với hình thức tìm kiếm mặc định (từ get_search_form()cuộc gọi không được sửa đổi ). Đó không phải là chính xác những gì bạn yêu cầu, nhưng tìm kiếm gia tăng là nỗi đau lớn để có được sự hoàn hảo. :)

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

Tất nhiên bạn phải làm điều đó bằng cách sử dụng Ajax, nhưng ở đây có một vấn đề. Vì WordPress sử dụng MySQL, bạn có thể quá căng thẳng với máy chủ của mình khi tìm kiếm nếu bạn cố gắng lấp đầy tìm kiếm bằng các truy vấn Cơ sở dữ liệu thực sự qua Ajax, nhưng những gì bạn có thể làm là phát triển một hệ thống trong đó tất cả các bài đăng được lưu vào một "wp_options" lớn và sau đó khi tìm kiếm được thực hiện, bạn truy vấn từ đó thay vì thực hiện tìm kiếm thực sự. Nhưng hãy nhớ rằng bạn cần cập nhật đoạn văn bản / biến tuần tự này mỗi khi bạn tạo hoặc chỉnh sửa bài đăng.

Nếu bạn không sẵn sàng dành thời gian để phát triển giải pháp này, tôi sẽ không khuyên bạn thực hiện loại "tìm kiếm trực tiếp" này.