Hướng dẫn tạo khung tìm kiếm giống Google kết hợp với live search

Trong bài Hướng dẫn tạo form live search cho Blog mình đã trình bày cách tạo khung tìm kiếm sử dụng feeds kết hợp với từ khóa tìm kiếm để hiển thị 10 bài viết liên quan đến từ khóa đó. Trong bài hôm này thì cách làm vẫn vậy chỉ nâng cấp giao diện của khung tìm kiếm nhìn bắt mắt hơn và có giao diện gần giống với khung tìm kiếm của Google.

Các bạn có thể xem demo ngay trên khung tìm kiếm đầu Blog mình áp dụng với trình duyệt web trên laptop và pc có màn hình 640px trở lên. Dưới đây là toàn bộ code bao gồm css, html và script

Copy


// CSS



<style type='text/css'>

.bg_Se {

    line-height: 36px;

    position: relative;

}

.bg_Se .gb_Se {

    display: inline-block;

    position: relative;

    min-width: 570px;

    background: rgba(0,0,0,0.04);

    border: 1px solid rgba(0,0,0,0);

    -webkit-border-radius: 4px;

    border-radius: 4px;

    -webkit-transition: background 100ms ease-in,width 100ms ease-out;

    transition: background 100ms ease-in,width 100ms ease-out;

}

.bg_Se .gb_Se.gb_af {

    background: #ffffff;

    border: 1px solid rgba(0,0,0,0.12);

    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.24);

    box-shadow: 0 1px 1px rgba(0,0,0,0.24);

}

.bg_Se input {

    background: transparent;

    font-size: 15px;

    line-height: 36px;

    padding-left: 50px;

    width: 100%;

    color: #3c4043;

    border: 0;

    outline: none;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}

.bg_Se button {

    width: 50px;

    border: 0;

    background: transparent;

    cursor: pointer;

    position: absolute;

    top: 0;

    line-height: 36px;

    outline: none;

    padding: 1px 0;

}

.bg_Se button svg {

    vertical-align: middle;

    width: 24px;

    height: 24px;

    fill: hsl(0,0%,53.3%);

}

.bg_Se .clear-text {

    right: 0;

}

.bg_Se .gb_Re {

    background: rgba(60,64,67,0.90);

    -webkit-border-radius: 4px;

    border-radius: 4px;

    color: #ffffff;

    font: 500 12px 'Roboto',arial,sans-serif;

    letter-spacing: .8px;

    line-height: 16px;

    margin-top: 4px;

    min-height: 14px;

    padding: 4px 8px;

    position: absolute;

    top: 38px;

    z-index: 1000;

    -webkit-font-smoothing: antialiased;

}

.gb_Re.Se {

    left: 0;

}

.bg_Se .hidden{

    display: none;

}

.gb_Re.De {

    right: 0;

}

.bg_Se .results {

    position: absolute;

    top: 40px;

    background: #ffffff;

    border: none;

    width: 100%;

    min-width: 320px;

    border-top: unset;

    border-radius: 4px 4px 0 0;

    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.258824), 0 2px 10px 0 rgba(0,0,0,0.156863);

    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.258824), 0 2px 10px 0 rgba(0,0,0,0.156863);

    cursor: default;

}

.bg_Se .results li {

    list-style: none;

}

.bg_Se .results li a {

    display: block;

    padding: 0 15px;

    color: #3c4043;

    font-size: 15px;

    font-weight: 500;

    line-height: 30px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

</style>



# HTML



<div class="bg_Se" role="search">

  <form action="/search" class="gb_Se" method="get">

    <button aria-label="Tìm kiếm" class="Se" role="button" 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>

    <input aria-label="Tìm kiếm blog này" autocomplete="off" dir="ltr" name="q" placeholder="Tìm kiếm" spellcheck="false" type="text" value="" />

    <button aria-label="Xóa tìm kiếm" class="clear-text hidden" type="button">

      <svg>

        <use xlink:href="/responsive/sprite_v1_6.css.svg#ic_close_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use>

      </svg>

    </button>

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

  </form>

  <div class="gb_Re Se hidden">Tìm kiếm</div>

  <div class="gb_Re De hidden">Xóa tìm kiếm</div>

</div>



// Script



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

<script>//<![CDATA[

$(document).ready(function() {

  $('.bg_Se input').click(function(e) {

    e.stopPropagation()

    $('.gb_Se').addClass('gb_af')

  })

  $('html').click(function() {

    $('.gb_Se').removeClass('gb_af')

  })

  $('.bg_Se .Se').hover(function(e) {

    if (e.type == 'mouseenter') {

      $('.gb_Re.Se').removeClass('hidden')

    } else {

      $('.gb_Re.Se').addClass('hidden')

    }

  })

  $('.bg_Se .clear-text').hover(function(e) {

    if (e.type == 'mouseenter') {

      $('.gb_Re.De').removeClass('hidden')

    } else {

      $('.gb_Re.De').addClass('hidden')

    }

  })

  $('.bg_Se input').on('keyup', function(e) {

    var textinput = $(this).val()

    if (textinput) {

      $.ajax({

        type: 'GET',

        url: '/feeds/posts/summary',

        data: {

          'max-results': 10,

          'alt': 'json',

          'q': textinput

        },

        dataType: 'jsonp',

        success: function(data) {

          $('.results,.clear-text').removeClass('hidden')

          $('.results').empty()

          if (data.feed.entry) {

            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 + '</a></li>')

            }

          } else {

            $('.results').addClass('hidden')

          }

        }

      })

    } else {

      $('.results,.clear-text').addClass('hidden')

    }

  })

})

//]]></script>