jQuery:如何AJAXify WordPress搜索？

Question

我试图添加AJAX功能到一个基于WordPress的网站。

当访问者单击菜单链接时，此代码将所需页面的文本加载到主页中：

$('#access a').click(function(event) {
    event.preventDefault();
    var url = $(this).attr('href');
$('#content').fadeOut(500, function() {
    $('#content').load(url, function() {
        $('#content').fadeIn(500);
        }); 
    });
});

我的问题是搜索表。它在页面中具有以下结构：

<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" />
    </div>
    </form></div>

当我在表单中键入一个单词测试，然后单击#searchsubmit“按钮或在键盘上输入键时，我将被重定向到一个新的WordPress页面，其地址如下：

http://www.myurl.com/?s=testing

下面是使其工作的PHP代码：

<?php if ( have_posts() ) : ?>
                <h1 class="page-title"><?php printf( __( 'Search Results for: %s', 'twentyten' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
                <?php
                /* Run the loop for the search to output the results.
                 * If you want to overload this in a child theme then include a file
                 * called loop-search.php and that will be used instead.
                 */
                 get_template_part( 'loop', 'search' );
                ?>
<?php else : ?>
                <div id="post-0" class="post no-results not-found">
                    <h2 class="entry-title"><?php _e( 'Nothing Found', 'twentyten' ); ?></h2>
                    <div class="entry-content">
                        <p><?php _e( 'Sorry, but nothing matched your search criteria. Please try again with some different keywords.', 'twentyten' ); ?></p>
                    </div><!-- .entry-content -->
                </div><!-- #post-0 -->
<?php endif; ?>

问题:我希望防止#searchsubmit单击和Enter键单击的默认行为，并将搜索结果(http://www.myurl.com/?s=whateverwordItype)的内容加载到主页的#content中。我怎么能做到呢？

(我想我只需要以某种方式在jQuery代码中插入这个php代码，但是任务有点超出了我对jQuery和PHP的了解。)

如果可能的话，我将非常感谢一个知识渊博的人提供的代码片段。

Answer 1

使用一些简单的jQuery和javascript

为了通过ajax请求加载搜索结果，可以使用以下代码直接从搜索结果页面获取它们：

// Bind the submit event for your form
$('#searchform').submit(function( e ){ 

    // Stop the form from submitting
    e.preventDefault();

    // Get the search term
    var term = $('#s').val();

    // Make sure the user searched for something
    if ( term ){

        $.get( '/', { s: term }, function( data ){

            // Place the fetched results inside the #content element
            $('#content').html( $(data).find('#content') );

        });

    }

});

注意：$(data).find('#content')假设您的search.php结果聚合在id为内容的元素中，即<div id="#content"> ... Results ... </div>

上面的内容将进入外部文件或放置在关闭的</body>标记之前。

您可以自定义search.php页面来组织输出结果。

Answer 2

尝尝这个

$("#searchsubmit").click(function(e){
    e.preventDefault();
    var search_val=$("#s").val(); 
    $.post('search.php',{search_string:search_val},function(data){
        if(data.length>0){
            $("#results").html(data);
        }
      });
});

这将调用search.php，它将将搜索字符串作为像$_POST['search_string']一样的post变量，在这里处理搜索字符串并回显结果，结果将以data的形式返回到页面。有一个id day results的div，$("#results").html(data);会将从search.php获得的结果放到div中。如果您想使用get，那么只需将jQuery函数中的post替换为get，您就可以在search.php中使用$_GET[]。

希望这能帮到你