Biến khung tìm kiếm của blog thành khung search live giống Facebook

Các bước thực hiện:

Bước 1: Chèn đoạn code sau vào trước thẻ </head> trong template.

<script src='//code.jquery.com/jquery.min.js'/>
<script>
var home=&quot;https://www.starsonit.xyz/&quot;,perPage=5;
//<![CDATA[
$(document).ready(function(){
$("#search_live input").click(function(n){
n.stopPropagation(),
$("#search_live input").keyup(function(){
var n=$("#search_live input").val(),o=new RegExp(n,"i"),t='<div class="row">';t='<div class="content_search"><span>Kết quả tìm kiếm</span></div>',
$.ajax({url:home+"feeds/posts/default?alt=json",dataType:"jsonp"}).done(function(e){
$.each(e.feed.entry,function(e,d){
if(""!=n&&-1!=d.title.$t.search(o)){if(t+='<div class="search-live_items">',void 0!=d.media$thumbnail)var i=d.media$thumbnail.url.replace(/\/s([\S]+)\//,"/s36-c/");t+='<a href="'+d.link[4].href+'" target="_blank"><img src="'+i+'" /></a>',t+='<h5><a target="_blank" href="'+d.link[4].href+'">'+d.title.$t+"</a></h5>",t+="</div>"}}),t+="</div>",
$("#search-live").html(t)})})}),$(document).click(function(){
$("#search-live").html("");
});
});
//]]>
</script>

Bước 2: Lưu template lại và hưởng thụ.

Lời kết: Chỉ với vài dòng code đơn giản chúng ta đã có thể tạo cho blog mình 1 khung search live tuyệt đẹp phải ko nào, chúc các bạn thành công!