Live Search với jQuery AJAX cho blogspot

Bài viết này mình giới thiệu cho anh em công cụ tìm kiếm với nhiều sự lựa chọn với jQuery AJAX cho blogspot
Để rõ hơn anh em xem demo bên dưới

Demo

Tìm kiếm thông thường

Live Search

CSS

CSS này anh em chỉnh lại cho phù hợp hơn với template đang dùng nhé

#ajax-search-form {
    position: relative;
    font: normal normal 13px/normal Arial,Sans-Serif;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    padding: 10px;
    width: 302px;
    height: 15px;
    color: #333;
    border-radius: 7px;
    border-right: 0;
    float: left;
    background: #dddddd;
    font-size: 12px;
    line-height: 16px;
    margin-top: 5px;
}

#ajax-search-form input {
    width: 310px;
    float: left;
    background: transparent;
    font-size: 12px;
    line-height: 16px;
    border: 0;
}
#ajax-search-form input::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}
#ajax-search-form input[type="submit"]{
    margin-left: -32px;
    margin-top: -5px;
    opacity: 0;
    width: 26px;
    height: 26px;
    cursor: pointer;
}

#search-result {
    border: 1px solid #ddd;
    background-color: white;
    padding: 10px 15px;
    margin: 2px 0;
    width: auto;
    height: auto;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99;
    box-shadow: 0 1px 3px rgb(183 183 183 / 40%);
    display: none;
}
#search-result ol,
#search-result li,
#search-result h4 {
  margin:0;
  padding:0;
}
#search-result h4,
#search-result strong {
  display:block;
  margin:0 30px 10px 0;
}
#search-result ol {margin:0 0 10px 28px}
#search-result .close {
    display: block;
    position: absolute;
    top: 6px;
    right: 10px;
    color: #ca252b;
    font-size: 20px;
}
#search-result strong {color:#B75252}
.fa-search {
    width: 13px;
    margin: 0 0 5px -25px;
}

HTML

Đặt đoạn code bên dưới vào vị trí muốn hiển thị công cụ Search

<form action="/search" id="ajax-search-form">
<input aria-label="Tìm kiếm trong blog này" autocomplete="off" class="inputsearch left text" id="search-input" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Tìm kiếm trong blog này...">
  <input aria-label="Submit" class="submit" type="submit" value="">
  <svg class="fa-search" viewBox="0 0 512 512">
    <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" fill="currentColor"></path>
  </svg>
</form>

Bỏ đoạn code được tô màu đỏ bên trên nếu anh em sử dụng chức năng "Live Search"

JS

Cài đặt

Nhập link website: Mở cửa sổ mới khi click bài viết:
Live Search:

Tạo mã Reset

Để lại nhận xét nếu anh em gặp khó trong quá trình thực hiện, bye! :D