21.01.06 ajax 통신 연계 통한 블로그 게시물 검색 페이지 생성(+인덱스 게시판 디자인 개편)

<search.js>

console.clear();
const articleList = [];

const apiURL = 'article_list.json';

$.get(
    apiURL,
    {},
    function(data) {
        data.forEach((row, index) => {

        const article = {
        id:row.id,
        regDate:row.regDate,
        writer:row.extra_memberName,
        title:row.title,
        body:row.body
            
          };
          articleList.push(article);
        });
    },
    'json'
);

const articleListBox = new Vue({
  el:"#article-search-section",
  data:{
    articleList:articleList,
    keyword:''
  },
    methods:{
    source:_.debounce(function(event){
      this.keyword = event.target.value;
    }, 500)
  },
  computed:{
    filteredKeyword:function(){
      return this.keyword.toLowerCase();
    },
    filtered:function(){
      if(this.filteredKeyword.length == 0){
        return this.articleList;
      }
      
      return this.articleList.filter((row)=>{
        const keys = ['title', 'writer', 'body', 'regDate'];
        
        const match = keys.some((key)=>{
          if(row[key].toLowerCase().indexOf(this.filteredKeyword) > -1){
          return true;
        }
          
        });
        return match;
      });   
    }
  }
});

 

<search 페이지>

blog.devj.me/search.html

Dev_J의 BLOG