Thêm tùy chọn autocomplete search vào hộp tìm kiếm trang web

Ở bài trước mình đã hướng dẫn từng bước thiết kế header đầu trang, nếu bạn đã làm theo có thể tham khảo bài viết này để thêm tùy chọn autocomplete search vào hộp tìm kiếm trang web tương tự như trang web theme blogspot của mình.

Cụ thể, khi bạn thêm tùy chọn này vào hộp tìm kiếm, bạn sẽ thêm sẵn danh sách các từ khóa gợi ý liên quan đến bài viết trong blog, càng nhiều càng tốt miễn là nó có liên quan. Từ những từ khóa này khi một người nhập văn bản vào hộp tìm kiếm danh sách từ khóa sẽ thu gọn những từ khóa liên quan đến văn bản đang nhập.

Danh sách các từ khóa được tạo sẵn trong hộp tìm kiếm trang web

Từ hộp tìm kiếm sau khi gõ văn bản, nếu nhấp chọn từ khóa sẽ chuyển hướng đến trang label còn nếu nhấp chọn nút tìm kiếm sẽ chuyển hướng đến trang tìm kiếm từ khóa. Tóm lại người dùng có tùy chọn khi nhập văn bản vào hộp tìm kiếm hoặc nhấp chọn từ khóa để đi đến trang label hoặc nhấp nút tìm kiếm để chuyển đến trang tìm kiếm.

Hướng dẫn thêm tùy chọn autocomplete search vào hộp tìm kiếm

Trong theme, các bạn chọn Chuyển đến tiện ích BlogSearch1, chọn mở thẻ <b:includable id='searchForm'> sau đó chèn đoạn html từ khóa ngay bên dưới buttun có type='reset'

<div class='results-content hidden'>

  <div class='dropdown'/>

  <div class='searchresults-wrapper'>

    <ul class='results'>

      <li data-search='Tên label' tabindex='0'>Từ khóa</li>

      <li data-search='Tên label' tabindex='0'>Từ khóa</li>

      <li data-search='Tên label' tabindex='0'>Từ khóa</li>

    </ul>

  </div>

</div>

Các bạn thêm bao nhiêu dòng <li data-search='Tên label' tabindex='0'>Từ khóa</li> đều được miễn là từ khóa mà bạn tạo có liên quan đến trang label là được. Với Tên label là tên nhãn của bài viết còn Từ khóa không nhất thiết phải giống Tên label.

Tiếp theo, các bạn chèn thêm đoạn JavaScript sau ngay trước thẻ đóng </body>

<script>//<![CDATA[

  window.addEventListener('load',function(){

    const input=document.querySelector('.web-search input'),

      results=document.querySelector('.web-search .results-content'),

      li=document.querySelectorAll('.results-content li'),

      reset=document.querySelector('.web-search .reset')

    var typingTimer

    function _reset(){

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

       li[i].innerHTML=li[i].textContent

       li[i].removeAttribute('class')

      }

    }

    input.addEventListener('keyup',function(){

      clearTimeout(typingTimer)

      var val=this.value

      setTimeout(function(){results.classList.remove('hidden')},100)

      reset.classList.remove('hidden')

      if(val!=''){

        typingTimer=setTimeout(function(){

          var str=val.toLowerCase(),name='',stn=''

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

            stn=li[i].textContent

            name=stn.toLowerCase()

            var res=name.indexOf(str),

            reg=name.slice(res,Number(res)+str.length)

            if(res!=-1){

              li[i].removeAttribute('class')

              li[i].innerHTML=name.replace(reg,'<strong>'+reg+'</strong>')        

            }else{

              li[i].classList.add('hidden')

            }

          }

        },500)

      }else{

        _reset()

      }

      reset.addEventListener('click',function(e){

        e.stopPropagation()

        reset.classList.add('hidden')

        _reset()

      })

    })

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

      li[i].addEventListener('click',function(){location.href='/search/label/'+this.getAttribute('data-search')})

    }

  })

//]]></script>

Phần giao diện mình đã thêm sẵn CSS ở bài viết hướng dẫn thiết kế blogspot căn bản - thiết kế header đầu trang rồi các bạn không cần thêm nữa. Đến đây bạn đã thêm xong tùy chọn autocomplete search vào hộp tìm kiếm trang web rồi đó.