如何创建实时自动填充搜索?

时间:2012-02-20 作者:mmaximalist

我目前正在尝试创建一个wordpress搜索功能,在搜索栏下方显示实时结果。在World Bank 网站(下面的屏幕)。我不是在寻找一个像你在谷歌上找到的自动填充。com,它完成了您键入的单词,而我希望它能在站点上找到实际的帖子。

我试着清理Wordpress的答案和其他类似的资源,但只实现了一个Google类型的搜索,这不是我想要的。如果您能提供任何帮助或指出正确的方向,我们将不胜感激。

search-before

search after

3 个回复
最合适的回答,由SO网友:Stephen Harris 整理而成

下面使用的是jQuery UI自动完成,它自3.3版起就包含在WordPress中。(我借用了@Rarst :D) 。

这仍然不是你想要的,但给了你一个很好的起点。下面使用了基本的jQuery UI样式,但您可以use the one that\'s currently worked out on trac 并从插件文件夹中调用它。

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

SO网友:Rarst

好的,这将是使用本机的非常基本的示例代码suggest.js, WP core for Ajax并绑定到默认搜索表单(来自未修改的get_search_form() 电话)。这并不完全是你所要求的,但增量搜索是获得完美的巨大痛苦。:)

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

SO网友:Webord

当然,您必须使用Ajax来完成,但这里有一个问题。由于WordPress使用MySQL,如果您试图通过Ajax使用真实的数据库查询来填充搜索,可能会给服务器带来过度的搜索压力,但您可能要做的是开发一个系统,将所有帖子保存到一个大的“wp\\u options”字段中,然后在完成搜索时从该字段进行查询,而不是进行真正的搜索。但请记住,每次创建或编辑帖子时,都需要更新这段文本/序列化变量。

如果您不愿意花一些时间来开发此解决方案,我不建议您进行这种“实时搜索”。

结束

相关推荐

search this custom post type

我正在尝试在我的博客上搜索特定的自定义帖子类型。自定义帖子类型的名称为:website_bookmarks我已使用隐藏字段修改了搜索表单<input type=\"hidden\" name=\"post_type\" value=\"website_bookmarks\" /> 因此,在我的URI搜索页面上,我将看到。。。www.mydomain.com/?s=mysearchterm&post_type=website_bookmarks 问题是它只显示我的常