Hôm nay mình sẽ hướng dẫn đến các bạn một bài viết liên quan về ajax củng như mẹo và thủ thuật trong wordpress. Theo mình thì chức năng Search autocomplete củng khá hay và cần thiết cho trang web của chúng ta, nó giúp trang web trở nên chuyên nghiệp và khách hàng cảm thấy thích thú hơn.
[post_random]
Hiện tại trong blog của mình thì củng có sử dụng chức năng này, nếu các bạn để ý thì mình đã làm nó lâu rồi.
Nào !!!!. Chúng ta cùng đến cách chuẩn bị củng như cách thực hiện nó như thế nào nhé.
Để thực hiện chức năng này, chúng ta làm như sau:
Bước 1: Tạo form search trong file header.php hoặc ở nơi nào mà muốn. Đoạn code form search sẽ như thế này.
<div class="header__search">
<form action="<?php bloginfo('url'); ?>/" method="GET" role="form">
<div class="main-input"><i class="fa fa-search"></i>
<input type="text" id="form-search" name="s" autocomplete="off" placeholder="Từ khóa ...... " class="form-control input-search">
</div>
</form>
<div id="load-form"></div>
</div>
- <div id=”load-form”></div> Là khu vực hiển thị kết quả trả về
Bước 2: Sử dụng jquery để gọi ajax và gởi dữ liệu về server để xử lý, chúng ta dùng ajax để thao tác dữ liệu nhanh hơn. Các bạn có thể chèn đoạn code này ở footer hay file js tùy các bạn nha. Như mình thì sẽ tạo 1 file js mới dành cho ajax load data này.
<script>
var timeout = null; // khai báo biến timeout
$(".main-input .input-search").keyup(function(){ // bắt sự kiện khi gõ từ khóa tìm kiếm
clearTimeout(timeout); // clear time out
timeout = setTimeout(function (){
call_ajax(); // gọi hàm ajax
}, 500);
});
function call_ajax() { // khởi tạo hàm ajax
var data = $('.main-input .input-search').val(); // get dữ liệu khi đang nhập từ khóa vào ô
$.ajax({
type: 'POST',
async: true,
url: my_ajax_object.ajax_url, // Hàm đăng ký ajax
data: {
'action' : 'Post_filters',
'data': data
},
beforeSend: function () {
},
success: function (data) {
$('#load-form').html(data); // show dữ liệu khi trả về
}
});
}
</script>
- Hàm keyup là một hàm trong jquery để bắt sự khi chúng ta gõ bàn phím
Hàm đăng ký js ajax mình tạo ở trong file functions.php như sau. Các bạn tham khảo đoạn code ở dưới đây nhé !
//---------------tạo js ajax
function my_enqueue() {
wp_register_script('loadajax-js', get_template_directory_uri() .'/assets/js/myloadmore.js', array(), 1, 1, 1 );
wp_enqueue_script('loadajax-js');
wp_localize_script( 'loadajax-js', 'my_ajax_object',
array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
Bước 3: Nhận dữ liệu, xử lý và sau đó trả kết quả về về người dùng.Các bạn chèn đoạn code này vào file functions.php nhé. Nếu bạn chưa biết file functions.php ở đâu thì có thể tìm hiểu bài cấu trúc theme trong wordpress nha
// Xử lý Ajax
add_action('wp_ajax_Post_filters', 'Post_filters');
add_action('wp_ajax_nopriv_Post_filters', 'Post_filters');
function Post_filters() {
if(isset($_POST['data'])){
$data = $_POST['data']; // nhận dữ liệu từ client
echo '<ul>';
$getposts = new WP_query(); $getposts->query('post_status=publish&showposts=10&s='.$data);
global $wp_query; $wp_query->in_the_loop = true;
while ($getposts->have_posts()) : $getposts->the_post();
echo '<li><a href="'.get_the_permalink().'">'.get_the_title().'</a></li>';
endwhile; wp_reset_postdata();
echo '</ul>';
die();
}
}
Bước 4: Hiễn thị kết quả. Như các bạn để ý ở bước 2 mình có dùng $(‘#load-form’).html(data). Đây là nơi để show dữ liệu ra.
Hiện tại mình hiễn thị dữ liệu theo thẻ <ul></ul>. Các bạn củng có thể thay đổi tùy biến tùy theo style của các bạn nhé. Và đừng quên thêm css vào cho đẹp nha.
Tổng kết
Trên đây là toàn bộ đoạn code củng như quá trình tạo ra một form search autocomplete trong wordpress. Các bạn đọc và làm theo nhé, kết quả sẽ như mong đợt nha :). Trong quá trình làm nếu bạn gặp thắc mắc thì hãy để lại comment cho mình nhé. Cảm ơn mọi người !!