jQuery的：如何AJAXify字preSS搜索？ [英] jQuery: How to AJAXify WordPress Search?

问题描述

我想AJAX功能添加到Word preSS为基础的网站。

I am trying to add AJAX functionality to a WordPress-based site.

当访问者单击菜单链接，这code加载所需的页面的文本的文本到主页：

When a visitor clicks a menu link, this code loads the text of the text of the required page into the main page:

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

我的问题是寻找的表格。它具有以下结构中的页：

My problem is with the search form. It has the following structure in the page:

<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按钮或键盘上的Enter键，我重定向到一个新的Word preSS页面地址如下：

When I type a word testing into the form, and click the #searchsubmit" button or Enter key on the keyboard, I am redirected to a new WordPress page with the following address:

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

下面是PHP code，使得它的工作：

Here's PHP code that makes it work:

<?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; ?>

问：我想prevent上#searchsubmit点击和回车键点击，并加载搜索结果内容的默认行为（http://www.myurl.com/?s= whateverwordItype）到主网页的＃内容。我该怎么办呢？

（我想我只需要插入内jQuery的code在PHP code以某种方式，但任务是有点出乎我的jQuery和PHP的知识。）

(I suppose I just need to insert that php code inside jQuery code in some way, but the task is a little beyond my knowledge of jQuery and PHP.)

我会，感谢从懂行的人一code段如果可能的话。

I would be grateful for a code snippet from a knowledgeable person, if possible.

推荐答案

为了通过一个Ajax请求加载搜索结果，你可以直接在搜索结果页面上使用下列code抓住他们：

Use some simple jQuery and javascript

In order to load your search results through an ajax request you can grab them directly from the search results page using the following code:

// 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') );

        });

    }

});

注： $（数据）.find（'＃内容）是假设你的的search.php 结果聚集在一个元素ID为内容，即＆LT; D​​IV ID =＃内容＆GT; ...结果...＆LT; / DIV＆GT;

Note: $(data).find('#content') is assuming your search.php results aggregate in an element whose id is content i.e. <div id="#content"> ... Results ... </div>

以上将进入一个外部文件或放置之前结束＆LT; /身体GT; 标记

The above would go into an external file or placed just before the closing </body> tag.

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

You can customize the search.php page to organize your output results.

这篇关于jQuery的：如何AJAXify字preSS搜索？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！