學習筆記：瀑布流＋即時搜尋

最近在做網站時，應用了許多在線上課程中學到的技巧，因此想來做一些實作的部分，這次分享的練習是Masonry+Bootstrap+簡易即時搜尋的效果。

在Masonry的部分，參照了Masonry的教學文件中，有一個與Bootstrap做結合的範例，code改寫如下：

//html
<div class="container">
  <div class="grid">
    <div class="grid-sizer col-xs-12 col-md-6 col-lg-3"></div>
    <div class="grid-item col-xs-12 col-md-6 col-lg-3">
      <div class="grid-item-content">...</div>
    </div>
    <div class="grid-item col-xs-4">
      <div class="grid-item col-xs-12 col-md-6 col-lg-3">...</div>
    </div>
    ...
  </div>
</div>
//js
var $grid= $('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true,
  horizontalOrder: true //控制div排列的順序
});

本來想要透過lazyload不要讓大量圖片一次載入，導致視覺上的不佳與效能上的低落，但是Masonry似乎跟lazyload好像有那麼一點衝突，因此使用了Masonry官方推薦的plugin：imagesloaded，code如下：

//js
$grid.imagesLoaded().progress( function() {
  $grid.masonry();
});

到這邊為止，Bootstrap+Masonry+imagesload的部分已經處理完成了，接下來進入即時搜尋的部分，這邊我參考了兩個技術文章分享的網誌的文章：OXXOSTUDIO、Muki’space，但依照範例，由於codepen的部分js的載入皆在</body>之前，因此我無法將OXXOSTUDIO範例中，讓jQuery去寫入樣式的方式去執行，指令將會是undefined的狀態。

因此這次我們利用Muki大大的範例來做使用，首先我在搜尋框的下方加入了一個style class以便稍後可以透過jQuery寫出樣式。

//html
<div class="search">
    <div class="container">
        <input type="text" class="searching form-control" id="key-in" placeholder="輸入您想搜尋的標題，結果將會即時出現">
   <style id="search-style"></style> //加入此行可讓jQuery寫入樣式
    </div>
</div>

加入了style class之後，就可以來使用即時搜尋的code了：

var that = $(this);
var Search = $("#search-style");
$("#key-in").bind("change paste keyup", function(){
  var value = $(this).val(); //偵測搜尋框中的文字(值)
  if (!value) { 
    Search.html("");
    return;
  }; 
  Search.html('.grid-item:not([data-title*="' + value.toLowerCase() + '"]) {display:none;}');
});
//當搜尋框中之文字符合data-*中的文字時，其他非符合的class全數隱藏

加入這段code 之後，卻發現當我的關鍵字出現符合的結果後，我的結果居然不會因為其他區塊的display:none; 而顯示在最上方，而是固定在原本的位置，因此我們在上方的code的判斷式中，兩種狀況各執行一次masonry的指令，結果如下：

var that = $(this);
var Search = $("#search-style");
$("#key-in").bind("change paste keyup", function(){
  var value = $(this).val();
  if (!value) {
    Search.html("");
    $('.grid').masonry();
    return;
  }; 
  Search.html('.grid-item:not([data-title*="' + value.toLowerCase() + '"]) {display:none;}');
  $('.grid').masonry();
});

這樣，就完成了即時搜尋的部分與瀑布流的結合呈現效果。

本範例引入的js有

//jQuery
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
//masonry
https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js
//imagesloaded
https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js

UI參考：奧格設計資源

技術文章參考：

• http://www.oxxostudio.tw/articles/201412/site-search.html
• http://muki.tw/tech/full-text-search-by-css/
• http://stackoverflow.com/questions/19447100/how-to-apply-masonry-to-hidden-div

最後本篇範例請至小弟的codepen觀看：瀑布流即時搜尋測試