Tiếp tục với chủ đề hướng dẫn lập trình wordpress và ajax trong wordpress, hôm nay mình xin hướng dẫn cho các bạn code chức năng search autocomplete trong wordpress.
Nếu các bạn chú ý thì web mình đã có chức năng từ lâu rồi. Chức năng này sẽ giúp gợi ý những kết quả khi bạn đang nhập từ khóa để search. Khách có thể thấy ngay những kết quả tìm kiếm mà không cần load lại website hoặc chuyển trang website.
Mình đã xây dựng chức năng này cho website mình khá lâu rồi 😀
Yêu cầu kiến thức khi thực hiện chức năng này:
Để thực hiện các chức năng này, chúng ta làm theo các bước sau:
Bước 1: Xây dựng form search ngoài giao diện.
Bước 2: Sử dụng jquery bắt sự kiện khi nhập từ khóa, đồng thời gọi ajax gởi từ khóa cho phía server.
Bước 3: Lập trình phía server nhận từ khóa, xử lý dữ liệu và trả kết quả về cho phía client.
Bước 4: Hiển thị kết quả ra ngoài frontend.
Bước 1: Xây dựng from search gồm một thẻ input nhập dữ liệu và 1 button tìm kiếm, để thực hiện chức năng này các bạn chèn đoạn code sau vào file index.php của theme đang dùng nhé ( Các bạn muốn hiện thì chổ nào thì chèn chổ đó, không nhất thiết phải file index.php 😀 )
<div class="main-search"> <form action="<?php bloginfo('url'); ?>/" method="GET" role="form" id="searchform"> <input type="text" autocomplete="off" class="form-control search-ajax" name="s" placeholder="Từ khóa"> <button type="submit">Tìm kiếm</button> </form> <div id="load-data"></div> </div>
Bước 2: Sử dụng jquery để gọi ajax và gởi dữ liệu cho phía server xử lý. Các bạn chèn đoạn code này vào file footer.php nhé. Đây là đoạn code sử dụng ajax nếu các bạn chưa nắm về ajax thì có thể tìm hiểu tại đây:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> var timeout = null; // khai báo biến timeout $(".search-ajax").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 = $('.search-ajax').val(); // get dữ liệu khi đang nhập từ khóa vào ô $.ajax({ type: 'POST', async: true, url: '<?php echo admin_url('admin-ajax.php');?>', data: { 'action' : 'Post_filters', 'data': data }, beforeSend: function () { }, success: function (data) { $('#load-data').html(data); // show dữ liệu khi trả về } }); } </script>
Bước 3: Nhận dữ liệu, xử lý dữ liệu và trả kết quả cho client. Để thực hiện bước này các bạn chèn đoạn code sau vào file functions.php của theme đang dùng nhé!
<?php 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 target="_blank" 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ả trả về, ở bước 2 ở phần cuối của đoạn code ajax. Các bạn có thể thấy $(‘#load-data’).html(data) đây là cách chúng ta đổ dữ liệu vào thẻ #load-data.
Dữ liệu trả về dưới dạng ul li, nếu thấy chưa đẹp mắt có thể thêm 1 tí css vào cho đẹp nhé 🙂 Để hiểu rõ hơn cách thực hiện chức năng này vui lòng xem video phía dưới!
Đang cập nhật…
Bài viết hôm nay mình đã hướng dẫn cho các bạn cách xây dựng chức năng search autocomplete trong wordpress. Tính năng giúp tăng trải nhiệm cho người dùng, giúp website của bạn trở nên chuyên nghiệp hơn.
Ở bài này mình chỉ hướng dẫn ở mức cơ bản. Các bạn có thể suy nghĩ để làm cho bộ lọc phóng phú hơn như thông báo khi ko tìm thấy dữ liệu, hiện thumbnail bài viết ở kết quả… Ngoài ra các bạn có thể tham khảo một số plugin cho chức năng này như: WP AutoComplete Search.
Chúc các bạn thành công! Chào thân ái và quyết thắng!
Fonttiengviet.com là một dự án website do JKS thực hiện cho khách hàng Huy Academy.…
Chắc chắn nhiều anh em khi đọc bài viết này sẽ nghĩ tôi đang quảng…
Widget trong WordPress là một công cụ mạnh mẽ cho phép bạn dễ dàng thêm…
Hôm nay mình sẽ hướng dẫn cho anh em cách tạo website blog cực kỳ…
Sống cực tốt anh em ạ :D Sau nhiều năm gắng bó với nghề thiết…
Nhân dịp quay lại viết blog mình share cho anh em code mẫu website blog…
View Comments
Không liên quan nhưng báo cho bạn biết, plugin lịch âm bạn share bị lỗi rồi.
Bạn vào chổ nào liên quan, comment nó bị lỗi chi nha bạn! :D
Bài viết rất hay
Cảm ơn bài viết của bạn. Mình đã inbox, mong bạn phản hồi
Chào bạn, mình mới học SEO chưa lâu, nên có điều thắc mắc.
Mình thấy 1 số người thường hay bôi đậm từ khóa cần SEO trong bài viết của họ. Mình ko hiểu là bôi đậm từ khóa cần SEO, thì nó có tác dụng gì ko? Hay là bôi đậm chỉ để mục đích là nhớ từ khóa SEO trong bài viết đó, để đỡ bị nhầm lẫn. Theo bạn thì có nên bôi đậm từ khóa cần SEO hay ko? Nói chung mình ko biết được tác dụng khi bôi đâm từ khóa SEO, bạn biết thì giúp đỡ mình nha. Cảm ơn b
Theo mình được biết. Nó cũng là một yếu tố ảnh hưởng tới seo. Hình như là hightline sẽ cho con bot của google dễ tìm ra mình hơn :D
cho e hỏi với ạ, khi e dùng ajax tìm kiếm ra kết quả r làm s để tất cả kết quả tìm được không đẩy các div của nó ở dưới xuống ạ
Cảm ơn bạn, chia sẻ quá tuyệt vời. Rất hữu ích để làm trang phim.
Thank bác đã ghé thăm blog :D
bạn có thể giải thích thêm hiển thị google maps trong wordpress một cách đơn giản đc ko? . Mình mới chuyển qua SSL của Cloudflare , giờ cái tìm kiếm adsend bị lỗi, fix kiểu gì hiếu ơi
?
Bạn có thể cho mình 1 cái CSS của bài viết này không, mình làm theo được rồi mà không biết css cho đẹp
Hic tùy theo web mà css bạn, chứ mình css web mình, mình không cho được! Bạn css sao cho vừa mắt là oke!
Nếu dữ liệu tìm kiếm trong database là rất lớn, thì bạn cho request lên database liên tục như vậy server có sập không?
Nó đâu có request liên tục bạn, Khi bạn search dừng 0.5 đến 1 giây mới send request mà.Với server phải có cache page, cache database các thứ nữa mà bạn. Mà mỗi lượt search mới send 1 requets. Còn load vào trang home 1 phát bạn chẹck thử tầm 100 request đó :D