Cách highlight kết quả tìm kiếm cho WordPress (có thể kết hợp JetEngine)

Avatar image of Tâm TrầnTâm TrầnOctober 26, 20230 comments

Đầu tiên, nhúng file JS CDN này vào

 <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.9.0/jquery.mark.min.js" integrity="sha256-jcYvou95wtQNBJhqUWTA7Xv+A9ZPumT5e9nwTEmCzJs=" crossorigin="anonymous"></script>

Tạo ra 1 function (nhớ truyền từ khóa, và element chứa nội dung cần highlight. Ở đây từ khóa là được lấy từ element “jet-search-filter__input” và nội dung được lấy từ class “jet-tabs__content”

function HLText() {
    var options = {accuracy: 'partially', element: 'mark', className: 'highlight', diacritics: true, separateWordSearch: true};
    var keywords = jQuery(".jet-search-filter__input").val();
    if (keywords != "") {
      jQuery('.jet-tabs__content').mark(keywords,options);
    }
}

Cuối cùng, gọi function ra và nhớ set css để HL bạn nhé!

mark{
    background: yellow;
    color: black;
}

Discuss