Code livesearch cho smm

Thực ra cũng không có gì hot :D cái này cũng lâu lâu rồi thì phải á, nhưng hôm nay mình quyết định share lại cho dù bị ném đá cũng được :))
Trước tiên là demo: https://smtruyen.sacmau.mobi
- Đối với bác nào vào bằng điện thoại thì bật cái menu ra sẽ thấy khung tìm kiếm, thì các bác tìm đại cái gì đó ví dụ như "Hiệp khách" thì nó sẽ load và cho ra danh sách 10 bài mà nó tìm được
- Tương tự, trên pc thì nó hiển thị sẵn cái input tìm kiếm rồi các bác chỉ cần nhập từ khóa nó cũng sẽ cho ra ds 10 bài mới nhất ra.
Nếu submit (Enter) thì nó sẽ chuyển đến trang tìm kiếm thông thường với đầy đủ các bài viết tìm được.
Mình chỉ làm sơ xài thôi còn việc trang trí sao cho đẹp thì tùy thuộc vào các bạn thôi :D

Đầu tiên bạn vào thư mục app tạo cho mình 1 file có tên là livesearch hay gì đó tùy vào sở thích của bạn rồi gián cái này vào:

TWIG

{% spaceless %}{% from '_functions' import paging, is_login, size, ago %}

{% set get_query = form_get('query') %}

{% set query = select_table_like('blog',{'name':get_query}) %}

{% set total = count(query) %}

{% set per = '10' %}

{% set page_max = total//per %}

{% if total//per != total/per %}{% set page_max = total//per+1 %}{% endif %}

{% set p = GET['page']|default(1) %}

{% if p matches '/[a-zA-z]|%/' or p < 1 %}{% set p = 1 %}{% endif %}

{% if p > page_max %}{% set p = page_max %}{% endif %}

{% set st=p*per-per %}

{% if total > 0 and get_query|trim != '' %}



{% for blog in select_table_like('blog',{'name':get_query},'ORDER BY id DESC LIMIT '~st~','~per) %}

<a href="/article/{{blog['id']}}-{{blog['slug']}}/"> {{blog['name']}}</a><br />

{% endfor %}



{% endif %}

{% endspaceless %}

tiếp theo, để cái này ở footer (Trong thẻ <script> hoặc tạo 1 file rồi gọi nó ra cũng được):



function showResult(str) {

  if (str.length==0) {

    document.getElementById("livesearch").innerHTML="";

    document.getElementById("livesearch").style.border="0px";

    return;

  }

  var xmlhttp=new XMLHttpRequest();

  xmlhttp.onreadystatechange=function() {

    if (this.readyState==4 && this.status==200) {

      document.getElementById("livesearch").innerHTML=this.responseText;

      document.getElementById("livesearch").style.border="1px solid #A5ACB2";

    }

  }

  xmlhttp.open("GET","/app/livesearch?query="+str,true);

  xmlhttp.send();

  var title = 'Tìm kiếm: '+str;

  var link = '?query='+str;

  var state = {name: link, page: title};

  window.history.pushState(state, title, link);

}

nếu file ban đầu bạn tạo không phải tên là livesearch thì sửa nó ở đây: /app/[i]livesearch[/i]
rồi cuối cùng là cái form seach của bạn:
- Đây là cái form search của mình:

HTML

<form class="search-form" method="get" action="/app/search">

  <input type="text" name="query" placeholder="Tìm gì cũng được..." class="search-input" onkeyup="showResult(this.value)">

  <div id="livesearch"></div>

</form>

Thì nếu đã có form search rồi thì thêm cái này vào <input type="text" của bạn: onkeyup="showResult(this.value)"
rồi ở trong thẻ <form> thì thêm <div id="livesearch"></div> (cái này dùng để hiển thị danh sách khi người ta nhập nội dung vào input thôi chứ cũng kcj.
Nếu thấy hay thì cho mình một lời hay ý đẹp ở dưới để mình có động lực mai mốt có gì hay ho mình share tiếp còn không thấy hay thì ném cho mình viên gạch.

Đăng nhập một phát, tha hồ bình luận (^3^)