Как использовать Jquery для получения результатов поиска ajax для wordpress
Мне нужно настроить Результаты поиска WordPress ajax, но мой метод не извлекает результаты при нажатии кнопки и вместо этого перенаправляет меня на другой сайт ( myurl.com?s=термин ). Я позвонил администратору-ajax.php правильно, но неправильно настроен. Есть идеи, что вызывает проблему?
//Script to activate ajax
jQuery(document).ready(function($){
var search_val=$("#s").val();
$('#searchsubmit').click(function(){
$.post(
WPaAjax.ajaxurl,
{
action : 'wpa56343_search',
search_val : search_val
},
function( response ) {
$('#results').append( response );
}
);
});
});
//function to setup wp_query
add_action('wp_ajax_wpa56343_search', 'wpa56343_search');
function wpa56343_search(){
global $wp_query;
$search = $_POST['search_val'];
$args = array(
's' => $search,
'posts_per_page' => 5
);
$wp_query = new WP_Query( $args );
get_template_part( 'search-results' );
exit;
}
//html
<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 id="results"></div>
2 ответов
вы должны обернуть ваш код в document.ready
$(document).ready(function(){
$("#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);
}
});
});
});
обновление:
$(document).ready(function(){
$("#searchsubmit").click(function(e){
e.preventDefault();
var search_val=$("#s").val();
$.ajax({
type:"POST",
url: "./wp-admin/admin-ajax.php",
data: {
action:'wpa56343_search',
search_string:search_val
},
success:function(response){
$('#results').append(response);
}
});
});
});
в ваши функции.в PHP
add_action('wp_ajax_nopriv_wpa56343_search', 'wpa56343_search'); // for not logged in users
add_action('wp_ajax_wpa56343_search', 'wpa56343_search');
function wpa56343_search()
{
// code
}
вы можете использовать typeahead.плагин JS jquery тоже прочитайте этот полный учебник для получения дополнительной информации:
http://wp.tutsplus.com/tutorials/plugins/enhancing-the-search-form-with-typeahead-js/