Huy Kira (Võ Quang Huy)

Trang chủ Webmaster Wordpress Hướng dẫn xây dựng chức năng search autocomplete trong wordpress

Hướng dẫn xây dựng chức năng search autocomplete trong wordpress

Ngày 26 - 09 - 2018 - Tại chuyên mục: Wordpress - Lượt xem: 10733

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:

Biết về vòng lặp get post trong wordpress
Biết và hiểu về ajax trong wordpress
Biết một ít về html css để style giao diện cho đẹp

Phân tích bài toán:

Để 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.

Code chức năng search autocomplete trong wordpress:

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>

<form action="<?php bloginfo('url'); ?>/" method="GET" role="form" id="searchform">

</form>

</div>

<div id=”load-data”></div> Là khu vực hiển thị kết quả trả về.
Phía trên là đoạn code hiển thị form tìm kiếm thông thường. Nếu không dùng chức năng search autocomplete thì chúng ta vẫn có thể sử dụng bình thường!

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>

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>

Đoạn code trên mình sử dụng thủ thuật clear timeout, chức năng có nghĩa kia đang gõ thì dữ liệu chưa được gởi đi, khi dừng gõ được 0.5 giây thì nó sẽ gọi hàm call_ajax(), và gởi dữ liệu đi.
Hàm keyup là hàm trong jquery bắt sự kiện khi chúng ta gõ phím.

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(); 
	    }
	}
?>

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

}

$data = $_POST[‘data’] lấy từ khóa phía từ client.
Trong trường hợp này chúng ta sử dụng thuộc tính s=$data trong vòng lặp get post để lấy kết quả tìm kiếm!

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!

Video hướng dẫn code search autocomplete trong wordpress

Đang cập nhật…

Tóm lại:

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!

Huy Kira

Đam mê hóa học, ưng thi vào trường kinh tế... Đậu vào trường Sư phạm, quyết tâm đi dạy... Ra trường đi làm designer, tự học frontend, chuyển qua làm PHP, được công ty đào tạo laravel... Và hiện tại đang code react native(2015) => Fullstack ... ?? tối về viết blog... (Còn tiếp...)

Phước ĐtKhô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.

Thích Trả lời 5 năm trước
- Huy KiraBạn vào chổ nào liên quan, comment nó bị lỗi chi nha bạn! :D
  
  Thích Trả lời 5 năm trước
Người dùngBài viết rất hay

Thích Trả lời 5 năm trước
HyundaiCảm ơn bài viết của bạn. Mình đã inbox, mong bạn phản hồi

Thích Trả lời 5 năm trước
Dươq NguyễnChà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

Thích Trả lời 5 năm trước
- Huy KiraTheo 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
  
  Thích Trả lời 5 năm trước
thangcho 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 ạ

Thích Trả lời 5 năm trước
CườngCảm ơn bạn, chia sẻ quá tuyệt vời. Rất hữu ích để làm trang phim.

Thích Trả lời 5 năm trước
- Huy KiraThank bác đã ghé thăm blog :D
  
  Thích Trả lời 5 năm trước
Dươq Nguyễnbạ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

Thích Trả lời 5 năm trước
Truong Tran?

Thích Trả lời 5 năm trước
Lê Đức Thọ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

Thích Trả lời 4 năm trước
- Huy KiraHic 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!
  
  Thích Trả lời 4 năm trước
Không điền tênNế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?

Thích Trả lời 4 năm trước
- Huy KiraNó đâ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
  
  Thích Trả lời 4 năm trước
Thịnhkhi xóa từ khóa đi sao cái load-data nó k biến mất anh

Thích Trả lời 4 năm trước
Tien DungXin hỏi bác Huy có cách nào làm được cái search box như này với WP k ạ http://www.dattech.com.vn/tai-lieu.html

Thích Trả lời 4 năm trước
- Huy KiraCũng tương tự ajax search theo nhiều điều kiện thôi bạn.
  
  Thích Trả lời 4 năm trước
  - Tien DungCảm ơn bác, cái live search với custom post-type đc rồi ạ, để em vọ thêm cái search nâng cao xem sao
    
    Thích Trả lời 4 năm trước
ThiệnKhông có demo hả AD. Bài viết rất hay :D e muốn xem demo để làm làm thêm một ít ạ

Thích Trả lời 4 năm trước
- Huy KiraBạn search thử cái website huykira.net á :D
  
  Thích Trả lời 4 năm trước
  - ThiệnEm cảm ơn bác ạ :D
    
    Thích Trả lời 4 năm trước
PhuongMình muốn đưa search autocomplete vào trang như thế này mà không được https://toicungco.com

Thích Trả lời 4 năm trước
Duy MnhTks Huy Kira đã chia sẻ. Hoạt động ok. Nhưng mình muốn hỏi về tùy biến chút xíu là khi nào search thì nó hiện ra cái #load-data nhưng khi xóa đi hết thì lại không tự tắt. Không biết cách làm như thế nào :D https://imgur.com/nMadJZP

Thích Trả lời 4 năm trước
- Thick QuotaKiểm tra data đưa lên server = rỗng thì server trả về rỗng thôi nhé. tham khảo code như hình sau: https://drive.google.com/file/d/1GxIlNo8L4MFDvINtQ9GpsSKJT01Tgz6A/view
  
  Thích Trả lời 12 tháng trước
Phạm Đăng QuânAnh ơi em đang làm bài tập trên wordpress nhưng bị một lỗi là "jquery lib đang chạy trên nền jquery"! Em hỏi leader thì ông ấy lại bảo cái này em chưa cần học, vì trình em chưa đủ nhưng nó cứ bám mãi trong não em ấy! Anh có chút gì chỉ bảo cho em với! Cám ơn anh đã đọc bài của em mặc dù hơi dài dòng! "

Thích Trả lời 3 năm trước
khánhLàm sao để khi click ra bên ngoài mà phần #load-data mất đi vậy bạn

Thích Trả lời 3 năm trước
TuanCậu có seach ajax chuyên mục wordpress không cậu .

Thích Trả lời 3 năm trước
Qung anhCảm ơn bạn đã chia sẻ bài này, đúng cái mình đag cần

Thích Trả lời 3 năm trước
DongVới dữ liệu hàng trăm ngàn record thì xử lý rất chậm, có cách giải quyết nào không bạn

Thích Trả lời 2 năm trước