Tìm kiếm AJAX trên các trang bài đăng theo loại bài đăng tùy chỉnh


8

Tôi gặp sự cố khi tạo tìm kiếm ajax trên các trang bài đăng duy nhất của mình. Tôi cần giới hạn kết quả tìm kiếm ở các loại bài đăng tùy chỉnh "fod_ideo" và "bài đăng" và loại 12. Vấn đề của tôi là tìm kiếm trả về tất cả các bài đăng trong các bộ lọc đó và không lấy giá trị tìm kiếm. Tôi đoán tôi đang thiếu một cái gì đó rõ ràng nhưng tôi có thể tìm ra nó. Đây là thiết lập của tôi.

<div class="panel">
  <h2>Search Videos</h2>
  <div id="my-search">
   <form role="search" method="get" id="searchform" action="http://myurl.com/" >
    <input type="text" value="" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Search" />
   </form>
  </div>
</div>

add_action('wp_ajax_wpa5000_search', 'wpa5000_search');
add_action('wp_ajax_nopriv_wpa5000_search', 'wpa5000_search');
function wpa5000_search(){
  global $wp_query;
  $search = $_POST['search_val'];
  $args = array(
    's' => $search,
    'posts_per_page' => 10,
    'cat' => 12, 
    'post_type' => array( 'post','fod_videos'  )
  );
  $wp_query = new WP_Query( $args );

  get_template_part( 'video-search-results' );

  exit;
}

add_action( 'wp_enqueue_scripts', 'wpa56343_scripts', 100 );
function wpa56343_scripts() {
 wp_enqueue_script(
    'wpa56343_script',
    get_template_directory_uri() . '/libs/search.js?ver=1.0',
    array( 'jquery' ),
    null,
    false
 );
 wp_localize_script(
    'wpa56343_script',
    'WPaAjax',
    array(
        'ajaxurl' => admin_url( 'admin-ajax.php' )
    )
 );
}

// tìm kiếm.php

$(document).ready(function($){
 $('#searchsubmit').click(function(e){
    var $panel = $(this).closest(".panel");
    $panel.empty();
    e.preventDefault();
    var search_val=$("#s").val();
    $.post(
        WPaAjax.ajaxurl,
        {
            action : 'wpa5000_search',
            search_val : search_val
        },
        function( response ) {
            $panel.append( response );
        }
    );
 });
});

//video-search-results.php

<?php
 while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
   //STUFF
<?php endwhile; ?>

$ Wp_query có phải là một đối tượng WP_Query thực tế không?
Brian Fegter

@BrianFegter Tôi không chắc là tôi hiểu ý bạn. Bạn biết thật lạ khi tôi sử dụng công thức chính xác này trên trang chỉ mục của mình để có kết quả tìm kiếm ajax và nó hoạt động tốt. Nó chỉ không kéo search_val. Tôi đã thử in $ search nhưng nó không trả về gì cả.
Pollux Khafra

1
Các hành động AJAX không được xác định $ wp_query vì không có ngữ cảnh nào ngoài dữ liệu $ _POST.
Brian Fegter

Điều gì làm cho nó hoạt động từ trang chỉ mục của tôi? Tôi sử dụng nó để thay thế vòng lặp mặc định với kết quả tìm kiếm và nó hoạt động.
Pollux Khafra

Câu trả lời:


7

Thay vì 'cat' => 12$wp_querysử dụng 'category_name' => slugget_posts().

Đây là một ví dụ cơ bản về cách thức hoạt động của nó:

PHP

add_action( 'wp_loaded', array ( 'T5_Ajax_Search', 'init' ) );

/**
 * Ajaxify the search form.
 */
class T5_Ajax_Search
{
    /**
     * The main instance. You can create further instances for unit tests.
     * @type object
     */
    protected static $instance = NULL;

    /**
     * Action name used by AJAX callback handlers
     * @type string
     */
    protected $action = 't5_ajax_search';

    /**
     * Handler for initial load.
     *
     * @wp-hook wp_loaded
     * @return void
     */
    public static function init()
    {
        NULL === self::$instance and self::$instance = new self;
        return self::$instance;
    }

    /**
     * Constructor. Registers the actions.
     *
     *  @wp-hook wp_loaded
     *  @return object
     */
    public function __construct()
    {
        $callback = array ( $this, 'search' );
        add_action( 'wp_ajax_'        . $this->action,        $callback );
        add_action( 'wp_ajax_nopriv_' . $this->action, $callback );
        add_action( 'wp_enqueue_scripts', array ( $this, 'register_script' ) );
    }

    /**
     * Callback for AJAX search.
     *
     * @wp-hook wp_ajax_t5_ajax_search
     * @wp-hook wp_ajax_nopriv_t5_ajax_search
     * @return void
     */
    public function search()
    {
        $args  = array ( 's' => $_POST['search_term'] );
        $args  = apply_filters( 't5_ajax_search_args', $args );
        $posts = get_posts( $args );
        if ( $posts )
        {
            $this->render_search_results( $posts );
        }
        else
        {
            print '<b>nothing found</b>';
        }
        exit;
    }

    /**
     * Create markup from $posts
     *
     * @param array $posts Array of post objects
     * @return void
     */
    protected function render_search_results( $posts )
    {
        print '<ul class="t5-ajax-search-results">';

        foreach ( $posts as $post )
        {
            printf(
                '<li><a href="%1$s">%2$s</a></li>',
                get_permalink( $post->ID ),
                esc_html( $post->post_title )
            );
        }
        print '</ul>';
    }

    /**
     * Register script and local variables.
     *
     * @wp-hook wp_enqueue_scripts
     * @return void
     */
    public function register_script()
    {
        wp_enqueue_script(
            't5-ajax',
            #plugins_url( __FILE__ ) . '/search.js',
            plugins_url( 'search.js', __FILE__ ),
            array ( 'jquery' ),
            NULL,
            TRUE
        );

        wp_localize_script(
            't5-ajax',
            'T5Ajax',
            array(
                'ajaxurl' => admin_url( 'admin-ajax.php' ),
                'action'  => $this->action
            )
        );
    }
}

JavaScript search.js

jQuery( function( $ ) {
    // search filed
    var $s = $( '#s' );
    // the search form
    var $sForm = $s.closest( 'form' );
    console.log( $sForm );
    $sForm.on( 'submit', function( event) {
        event.preventDefault();
        $.post(
            T5Ajax.ajaxurl,
            {
                action:     T5Ajax.action,
                search_term: $s.val()
            },
            function( response ) {
                // just append the result to the search form.
                $sForm.append( response );
            }
        );
    });
});

Hạn chế tìm kiếm

add_filter( 't5_ajax_search_args', 'restrict_t5_search' );

function restrict_t5_search( $args )
{
    $args['post_type'] = array ( 'post', 'fod_videos' );
    $args['category_name']       = 'category-slug';
    return $args;
}

Thay vì của tôi, $this->render_search_results( $posts );bạn cũng có thể tải một mẫu từ chủ đề của bạn và sử dụng $postsmảng trong một kết quả tinh vi hơn. :)


3

Tôi đã nhận được mã gốc làm việc, nhưng với loại bài tùy chỉnh (không có danh mục). Thêm một đầu vào ẩn trong biểu mẫu của bạn với loại bài đăng của bạn như thế này:

<input type="hidden" name="post_type" value="fod_videos" />
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.