Thêm tính năng live search kết hợp bộ lọc label vào công cụ tìm kiếm trong Blogger

Khi tích hợp tính năng live search vào công cụ tìm kiếm, người đọc có thể tìm nhanh kết quả khi gõ từ khóa thay vì phải truy cập trang tìm kiếm, một tính năng rất hay nữa mà mình thêm vào đó là bạn có thể tích hợp thêm bộ lọc label để lọc kết quả theo label rất thích hợp với các theme bán hàng.

Cơ chế hoạt động

Cơ chế hoạt động của plugin live search

• Khi gõ từ khóa tìm kiếm, plugin được kích hoạt
• Lấy từ khóa thêm vào url nguồn cấp
• Get feeds tìm kết quả
• Hiển thị danh sách kết quả thông tin bì viết bên dưới khung tìm kiếm: Link, Ảnh, Tiêu đề, Label
• Nếu tích hợp bộ lọc label: Chỉ hiển thị kết quả trong label đã chọn 

Cách áp dụng

Bước 1: Chèn code html khung tìm kiếm vào vị trí muốn hiển thị, lưu ý có thể chèn nhiều khung tìm kiếm hiển thị tại một trang ví dụ vừa trên menu vừa bên widget sidebar

+ Bao gồm bộ lọc label

<div class="bg_se" style="text-align:center">

  <form action="/search" method="get" role="search">

    <select class='bg_sl bg_fl bg_lh bg_fo'>

      <option value="">Danh mục</option>

      <option value="Tên label">Tên hiển thị</option>

      <option value="Tên label">Tên hiển thị</option>

      <option value="Tên label">Tên hiển thị</option>

      <option value="Tên label">Tên hiển thị</option>

      <option value="Tên label">Tên hiển thị</option>

    </select>

    <div class="bg_wr bg_fl bg_lh">

    <button class="bg_su" type="submit">

      <svg viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/></svg>

    </button>

    <input autocomplete="off" class="bg_in bg_lh bg_fo" name="q" placeholder="Tìm kiếm" required="" spellcheck="false" type="text" value=""/>

    <input name="max-results" type="hidden" value="12"/>

    <button class="bg_re hidden" type="reset">

      <svg viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>

    </button>

    </div>

    <div class="bg_co hidden">

      <div class="drop_down"></div>

      <div class="bg_ra">

        <ul class="results"></ul>

      </div>

    </div>

  </form>

</div>

Hiển thị

+ Chỉ khung tìm kiếm

<div class="bg_se" style="text-align:center">

  <form action="/search" method="get" role="search">

    <div class="bg_wr bg_fl bg_lh">

    <button class="bg_su" type="submit">

      <svg viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/></svg>

    </button>

    <input autocomplete="off" class="bg_in bg_lh bg_fo" name="q" placeholder="Tìm kiếm" required="" spellcheck="false" type="text" value=""/>

    <input name="max-results" type="hidden" value="12"/>

    <button class="bg_re hidden" type="reset">

      <svg viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>

    </button>

    </div>

    <div class="bg_co hidden">

      <div class="drop_down"></div>

      <div class="bg_ra">

        <ul class="results"></ul>

      </div>

    </div>

  </form>

</div>

Hiển thị

Bước 2: Chèn code script trước thẻ đóng </body>

<b:if cond='!data:view.isError'>

<script id='search_settings'>//<![CDATA[

  var live_search_settings={

    visible:'true',

    homepageUrl:'https://www.thietkeblogspot.com',

    noresults:'Không tìm thấy kết quả nào',

    filter:'icons-font',

    thumbUrl:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s50-c/safe_image.png'

  }

//]]></script>

<script defer='' src='https://cdn.jsdelivr.net/gh/vietblogdao/js/blogger-live-search.min.js'/>

</b:if>

Chú thích:

var live_search_settings={

  visible:'true', // Đặt giá trị thành false nếu muốn tắt live search

  homepageUrl:'https://www.thietkeblogspot.com', // Địa chỉ Blog không bao gồm / đằng sau

  noresults:'Không tìm thấy kết quả nào', // Văn bản hiển thị nếu không thấy kết quả

  filter:'icons-font', // Lọc không hiển thị kết quả trong label này, bỏ trồng nếu không sử dụng lọc

  thumbUrl:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s50-c/safe_image.png' // Link ảnh thay thế nếu bài viết không có ảnh

}

Bước 3: Chèn css trước thẻ đóng </head>

Code css tham khảo cho giao diện khung tìm kiếm

<b:tag name='style'>/* <![CDATA[ */

.bg_se .hidden{display:none}

.bg_se>form{position:relative;max-width:500px;width:100%;display:inline-block}

.bg_fl{background-color:#f5f8fa;display:inline-block;float:left;position:relative;border:1px solid #e6ecf0;-webkit-border-radius:21px;border-radius:21px}

.bg_lh{line-height:36px;height:36px;outline:none}

.bg_fo{font:500 16px Roboto,Arial,sans-serif;color:#264459!important}

.bg_se .bg_sl{padding:0 10px;width:30%;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:right .45em top 50%;background-repeat:no-repeat;background-size:auto 16px}

.bg_se .bg_wr{width:100%}

.bg_sl+.bg_wr{width:70%}

.bg_se .bg_in{background:transparent;padding-left:40px;width:100%;border:0}

.bg_se button{width:40px;height:34px;border:0;background:transparent;position:absolute;top:0}

.bg_se button.bg_su{left:0}

.bg_se button.bg_re{right:0}

.bg_se button>svg{height:22px;width:22px;vertical-align:middle;fill:hsl(0,0%,53.3%)}

.bg_co{position:absolute;top:38px;height:100vh;z-index:9999;width:100%}

.bg_co>.drop_down{overflow:hidden;position:absolute;display:block;width:28px;height:14px;top:-14px;left:50%;-ms-transform:translateX(-50%);transform:translateX(-50%)}

.bg_co>.drop_down::after{position:absolute;display:block;width:14px;height:14px;bottom:-7px;left:7px;background-color:#fff;border-radius:3px 0 0 0;box-shadow:0 0 10px rgba(0,0,0,0.2);-ms-transform:rotate(45deg);transform:rotate(45deg);content:""}

.bg_co>.bg_ra{background-color:#fff;padding:15px;-webkit-border-radius:4px;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,0.25);background-clip:padding-box;max-height:calc(100vh - 50px);overflow-x:hidden;overflow-y:auto}

.bg_co ul{display:flex;flex-wrap:wrap;padding:0!important;margin:0!important;text-align:left}

.bg_co li{float:left;width:100%;list-style:none!important}

.bg_co li:not(:first-child):not(:last-child){padding:7.5px 0}

.bg_co li:first-child{padding-bottom:7.5px}

.bg_co li:last-child{padding-top:7.5px}

.bg_co li.no_results{padding:0;text-align:center}

.bg_co li>a{display:flex;-ms-flex-align:center;align-items:center;font-weight:normal;line-height:1.4}

.searching_img{width:50px;line-height:0}

.searching_title{width:calc(75% - 50px);padding:0 12px}

.searching_cate{width:25%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;font-weight:bolder}

.searching_img>img{max-width:100%;height:auto;border-radius:100%}

.bg_co ins{text-decoration:none}

.searching{opacity:1!important;position:relative;color:rgba(255,255,255,0.05);pointer-events:none!important}

.searching:after{animation:spin 500ms infinite linear;border:2px solid #ffffff;border-radius:32px;border-right-color:transparent!important;border-top-color:transparent!important;content:"";display:block;height:14px;top:50%;margin-top:-8px;left:50%;margin-left:-8px;position:absolute;width:14px}

.bg_su.searching:after{border-color:hsl(0,0%,53.3%)}

.bg_su.searching>svg{display:none}

@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

@media(min-width:769px){.bg_sl,.bg_se button{cursor:pointer}}

/* ]]> */</b:tag>