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 "или клавишу Enter на клавиатуре, я перенаправляюсь на новую страницу 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 главной страницы. Как это сделать? что?

(Полагаю, мне просто нужно каким-то образом вставить этот php-код в код jQuery, но эта задача немного выходит за рамки моих знаний о 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 результаты агрегируются в элементе с идентификатором content, то есть <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']. Здесь вы обрабатываете строку поиска и выводите результаты, которыевернется на страницу как data.Имейте div с идентификатором day results, $("#results").html(data); поместит результаты, полученные из search.php, в div.Если вы хотите использовать get, просто замените post в функции jQuery на get, и вы можете использовать $_GET[] в search.php.

Надеюсь, это поможет вам