Cách Thêm Khung Live Search Cho Blogspot

Cách Thêm Khung Live Search Cho Blogspot. Vấn đề về live search này có từ rất lâu từ khi mình viết bài này, nhưng dạo này rộ lên cái phong trào về cách tạo Live Search Cho Blogspot Blogger nên hôm nay mình viết lại bài này.

Với việc giúp người dùng dễ dàng tìm kiếm và tìm kiếm nhanh hơn vì các kết quả search sẽ hiển thị hết trong khung tìm kiếm. Nói một cách dể hiểu hơn Khung Live Search sẽ đưa ra những kết quả tìm kiếm khi ta nhập từ khóa cần tìm ngoài ra bạn có thể thêm cách thêm photoshop online vào blogspot

Hướng Dẫn Tạo Khung Live Search Cho Blogspot

Bước 1 : Đầu tiên các bạn thêm Css Search Live vào <b:skin> để định hình giao diện tìm kiếm nhé

// CSS ZaloSec.Com
#searchForm {
  display:inline-block;
  position:relative;
  width:500px;
}
#searchForm input {
  background:transparent;
  font-size:14px;
  line-height:27px;
  text-indent:14px;
  width:90%;
  color:#212121;
  border:1px solid #e0e0e0;
  border-right:none;
  border-radius:2px 0 0 2px;
  outline:0;
}
#searchForm input:hover,
#searchForm button:hover {
  border:1px solid #b9b9b9;
  border-top:1px solid #a0a0a0;
  -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
  -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
}
#searchForm button {
  width:60px;
  border:1px solid #e0e0e0;
  border-radius:0 2px 2px 0;
  background:rgb(230,230,230);
  cursor:pointer;
  position:absolute;
  top:10px;
  outline:0;
  line-height:27px;
}
#searchForm button svg {
  vertical-align:middle;
  width:21px;
  height:21px;
}
#searchForm .results {
  position:absolute;
  top:50px;
  background:#fff;
  border:1px solid #e0e0e0;
  width:90%;
  min-width:320px;
  border-top:unset;
  box-shadow:0 2px 4px rgba(0,0,0,0.2);
  -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
#searchForm .results li {
  line-height:list-style:none;
}
#searchForm .results li a {
  display:block;
  padding:0 15px;
  color:#212121;
  font-size:15px;
  font-weight:500;
  line-height:30px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#searchForm .results li:hover {
  background:rgb(230,230,230);
}
#searchForm .hidden {
  display:none!important;
}

Bước 2 : Thêm Link jquery đặt trước </head> nếu chưa có

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

Bước 3 : Sau đó các bạn thêm đoạn javascript này trước </body>

<script>//<![CDATA[
$(window).on('load', function() { // Khi tải trang xong mới tải script
  $('#searchForm input').on('keyup', function(e) { // Tạo sự kiện khi gõ từ khóa vào khung search
    var textinput = $(this).val() // đặt từ khóa bằng textinput
    if (textinput) { // Nếu có từ khóa thì sử dụng hàm ajax lấy bài viết liên quan
      $.ajax({
        type: 'GET',
        url: '/feeds/posts/summary',
        data: {
          'max-results': 10, // đặt kết quả tìm kiếm tối đa là 10
          'alt': 'json',
          'q': textinput
        },
        dataType: 'jsonp',
        success: function(data) { // khi tải xong feed bắt đầu tạo kết quả
          $('.results,.clear-text').removeClass('hidden') // loại bỏ class hidden của phần html class='clear-text hidden' & class='results hidden' hiển thị kết quả
          $('.results').empty() // xóa kết quả nếu có
          if (data.feed.entry) { // nếu có kết quả thì tạo tiêu đề & link bài viết liên quan
            for (var i = 0; i < data.feed.entry.length; i++) {
              for (var j = 0; j < data.feed.entry[i].link.length; j++) {
                if (data.feed.entry[i].link[j].rel == 'alternate') {
                  var postUrl = data.feed.entry[i].link[j].href;
                  break;
                }
              }
              var postTitle = data.feed.entry[i].title.$t;
              $('.results').append('<li><a href=' + postUrl + ' title="' + postTitle + '">' + postTitle + '</li>');
            }
          } else { // nếu không có kết quả
            $('.results').addClass('hidden') // thêm class hidden vào phần html class='results hidden' làm ẩn
          }
        }
      })
    } else { // nếu không có từ khóa
      $('.results,.clear-text').addClass('hidden') // thêm class hidden vào phần html class='results hidden' &  class='clear-text hidden' làm ẩn
    }
  })
  $('.clear-text').click(function() { // tạo sự kiện khi click vào nút clear text
    $('#searchForm input').val('') // xóa từ khóa
    $('.results,.clear-text').addClass('hidden') // thêm class hidden vào phần html class='results hidden' &  class='clear-text hidden' làm ẩn
    $('.results').empty() // xóa kết quả nếu có
  })
})
//]]></script>

Bước 4 : Thay thế Form HTML Search Cũ rồi đổi thành đoạn HTML sau

<form id='searchForm' action='/search'>
  <input autocomplete='off' expr:aria-label='data:messages.searchThisBlog' expr:placeholder='data:messages.search' name='q'/>
  <svg class='clear-text hidden'><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_close_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
  <button expr:value='data:messages.search.escaped' type='submit'><svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_search_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg></button>
  <ul class='results hidden'></ul>
</form>

Cách tạo Live Search cũng không quá khó nên các bạn cứ thực hiện nhé, Như vậy là mình vừa hướng dẫn các bạn xong cách thêm khung Live Search vào Blogspot rồi. Hi vọng, bạn sẽ thích thủ thuật này

Code : Nguyễn Tuấn

ĐĂNG KÝĐĂNG NHẬP