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: 11619

Tiếp tục với chủ đề hướng dẫn lập trình wordpressajax 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.

search autocomplete trong wordpress.

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:

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 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:

  • Đ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é!

  • $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!

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

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...)

30
  • 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 6 năm trước

  • Người dùngBài viết rất hay

    Thích Trả lời 6 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

  • 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 5 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 5 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 5 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 5 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 5 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 5 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 5 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 5 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 5 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 5 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 1 năm 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 4 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 4 năm trước

  • TuanCậu có seach ajax chuyên mục wordpress không cậu .

    Thích Trả lời 4 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 4 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

AVT