Canlı otomatik doldurma araması nasıl oluşturulur?

Şu anda, arama çubuğunun altındaki canlı sonuçları gösteren bir wordpress arama fonksiyonu oluşturmaya çalışıyorum. Dünya Bankası web sitesinde bir örnek var (aşağıdaki ekranlar). Yazdığınız kelimeleri tamamlayan Google.com'da bulacağınız gibi bir otomatik dolum aramıyorum, bunun yerine sitedeki gerçek yayınları bulmasını istiyorum.

Wordpress Yanıtlar ve diğer benzer kaynaklar aracılığıyla bir fırçalama yapmaya çalıştım, ancak yalnızca aradığım şey olmayan bir Google türü arama uygulamasına geçtim. Doğru yöndeki herhangi bir yardım veya puan çok takdir edilecektir.

Aşağıdakiler, 3.3'ten beri WordPress'te bulunan jQuery UI Otomatik Tamamlama'yı kullanır. ( @Rarst : D biçiminden ödünç aldım ).

Peşinde olduğun şey tam olarak hala değil, ama sana iyi bir başlangıç ​​noktası verir. Aşağıdakiler temel jQuery UI stilini kullanır, ancak şu anda trac üzerinde çalışmış olanı kullanabilir ve eklenti klasörünüzden arayabilirsiniz.

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

Tamam, bu suggest.jsAjax için yerel , WP çekirdeğini kullanan ve varsayılan arama formuna (değiştirilmemiş get_search_form()çağrıdan) bağlanan çok temel bir örnek kod olacaktır . Tam olarak istediğin bu değil, ama artan arama mükemmelleşmek için büyük bir acı. :)

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

Elbette Ajax kullanarak yapmanız gerekir, ama burada bir sorun var. WordPress MySQL kullandığından, aramayı Ajax ya da gerçek Veri tabanı sorgularıyla doldurmaya çalışırsanız, sunucunuzu aramaya zorlayabilir, ancak yapabileceğiniz şey, tüm gönderilerin büyük bir "wp_options" içine kaydedildiği bir sistem geliştirmek. alanını ve ardından bir arama yapıldığında, gerçek bir arama yapmak yerine bu sorguyu sorgularsınız. Ancak bir yazı oluşturduğunuzda veya düzenlediğiniz her seferde bu metin / serileştirilmiş değişkeni güncellemeniz gerektiğini unutmayın.

Bu çözümü geliştirmek için biraz zaman harcamak istemiyorsanız, bu tür "canlı arama" yapmanızı önermem.