Xây dựng hộp tìm kiếm bài viết đầu trang trên thiết bị di động

Hộp tìm kiếm rất quan trọng đối với trang web, hộp tìm kiếm phải được hiển thị ở vị trí dễ nhìn thấy nhất để người dùng tìm kiếm bài viết bất cứ khi nào cần. Với xu hướng người dùng ngày thường sử dụng các thiết bị di động truy cập web do đó cần xây dựng hộp tìm kiếm tối ưu cho người dùng mang lại kết quả cao.

Sai lầm khi thiết kế trang blog trên giao diện di động hay đặt hộp tìm kiếm ẩn đi gây khó khăn cho người dùng khi truy cập tìm kiếm bài viết. Hộp tìm kiếm nên được đặt ở vị trí hiển thị đầu trang đặc biệt tại trang chủ. Để tối ưu hơn nên tạo cho hộp tìm kiếm tính năng tìm kiếm nhanh bài viết để trang không bị chuyển hướng sang trang tìm kiếm kết quả.

Ví dụ minh họa hộp tìm kiếm đầu trang tại trang chủ khi gõ từ khóa tính năng tìm kiếm sẽ tìm và hiển thị ngay các bài viết liên quan bên dưới hộp tìm kiếm thay vì phải nhấp vào nút tìm kiếm để đi đến trang tìm kiếm rút gọn được thao tác đem lại trải nghiệm cao cho người dùng.

Hiển thị hộp tìm kiếm trang web đầu trang tích hợp tính năng tìm kiếm nhanh bài viết

Sử dụng get url trực tiếp bằng Jquery thay thế cho url nguồn cấp là phương pháp mình đang sử dụng đặc biệt với tìm kiếm bài viết hiển thị kết quả chính xác hơn so với lấy kết quả từ nguồn cấp.

Để hiểu rõ hơn get url trực tiếp là như thế nào bạn hãy tử hình dung quy trình tìm kiếm bắt đầu bằng việc gỏ từ khóa blog vào hộp tìm kiếm sau đó nhấp vào nút tìm kiếm để trang chuyển hướng đến trang tìm kiếm bài viết, tại đây hiển thị danh sách các bài viết liên quan đến từ khóa trong hộp tìm kiếm. Mình sẽ sử dụng chính URL của trang tim kiếm đó get để lấy bài viết luôn thay vì phải đi đến trang tìm kiếm.

Áp dụng trong blogspot mình sẽ thêm một tiện ích tìm kiếm blog ngay phía trên tiện ích Bài đăng trên Blog và mình đặt điều kiện cho tiện ích này chỉ hiển thị trên mobile và tại trang chủ.

<b:widget cond='data:blog.isMobileRequest and data:view.isHomepage' id='BlogSearch2' locked='true' title='Tìm kiếm' type='BlogSearch' version='2' visible='true'>

  <b:includable id='main'>

    <b:attr name='class' value='widget blog-search'/>

    <b:attr name='id' value=''/>

    <b:attr name='data-version' value=''/>

    <b:include name='content'/>

  </b:includable>

  <b:includable id='content'>

    <b:include name='searchForm'/>

  </b:includable>

  <b:includable id='searchForm'>

    <form expr:action='data:blog.searchUrl' method='get' role='search'>

      <input aria-label='Tìm kiếm bài viết' autocomplete='off' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q' placeholder='Tìm kiếm bài viết' required='' spellcheck='false' type='search'/>

      <input name='max-results' type='hidden' value='10'/>

      <b:include name='searchSubmit'/>

    </form>

  <b:includable id='searchSubmit'>

  <b:includable id='searchSubmit'>

    <button expr:aria-label='data:messages.search' type='submit'><svg clip-rule='evenodd' fill-rule='evenodd' height='18px' viewBox='0 0 24 24' width='18px'><path d='M15.853 16.56c-1.683 1.517-3.911 2.44-6.353 2.44-5.243 0-9.5-4.257-9.5-9.5s4.257-9.5 9.5-9.5 9.5 4.257 9.5 9.5c0 2.442-.923 4.67-2.44 6.353l7.44 7.44-.707.707-7.44-7.44zm-6.353-15.56c4.691 0 8.5 3.809 8.5 8.5s-3.809 8.5-8.5 8.5-8.5-3.809-8.5-8.5 3.809-8.5 8.5-8.5z'/></svg></button>

  </b:includable>

</b:widget>

Tiếp theo trong tiện ích bài đăng trên Blog, trong thẻ <b:includable id='main'> của tiện ích mình đặt một thẻ div hiển thị dữ liệu ngay phía trên thẻ div hiển thị các bài viết, ví dụ

<b:tag class='blog-query' cond='data:blog.isMobileRequest and data:view.isHomepage' name='div'/>

<div class='blog-posts'>

  <b:loop values='data:posts' var='post'>

    <b:include data='post' name='post'/>

  </b:loop>

</div>

Cuối cùng mình viết script get url lấy dữ liệu bài viết

<b:if cond='data:blog.isMobileRequest and data:view.isHomepage'>

  <script>//<![CDATA[

  $(function() {

    var typingTimer

    $('.blog-search input[type="search"]').focus()

    $('.blog-search input[type="search"]').on('input', function() {

      clearTimeout(typingTimer)

      var $this = $(this)

      if ($this.val) {

        function __default() {

          $('.breadcrumbs>div>h3').html('Bài đăng mới nhất')

          $('.blog-posts,.page-numbers').fadeIn()

          $('.blog-query').empty()

        }

        typingTimer = setTimeout(function() {

          var str = $this.val().toLowerCase().replace(/ /gi, '+')

          if (str.length >= 3) {

            $('.blog-posts,.page-numbers').fadeOut()

            $('.blog-query').addClass('spinner').empty()

            $('.breadcrumbs>div>h3').html('Đang tìm bài viết...')

            $.get('/search?q=' + str + '&max-results=150', function(e) {

              var a = $(e).find('.Blog .post')

              if (a.length) {

                var html = ''

                for (var i = 0; i < a.length; i++) {

                  html += '<article class="post">' + $(a[i]).html() + '</article>'

                }

                $('.breadcrumbs>div>h3').html('Hiển thị ' + a.length + ' bài viết')

                $('.blog-query').removeClass('spinner').append(html)

              } else {

                $('.breadcrumbs>div>h3').html('Kết quả tìm kiếm')

                $('.blog-query').removeClass('spinner').html('<div class="flex align-center"><p>Không tìm thấy bài viết nào.</p><p class="keywords-reset"><svg height="24px" viewBox="0 0 24 24" width="24px"><path fill="#707070" 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"></path></svg></p></div>')

                $('.keywords-reset').click(function() {

                  $this.val('');

                  __default()

                })

              }

            })

          }

          if (str.length == '' || str.length < 3) {

            __default()

          }

        }, 500)

      }

    })

  })

  //]]></script>

</b:if>

Bài viết tham khảo: Tầm quan trọng của jumb break và số bài đăng tối đa hiển thị tại trang chỉ mục