[Vue] Javascript filter - 한글 검색기능

 

autocomplete - 자동 완성 기능을 사용하지 않음.

autocorrect - 수정기능 사용하지 않음

spellcheck - 빨간 줄 생기는 것 없애기

 

 

---

 

<input type="search" @input="searchWord" placeholder="텍스트검색" autocomplete="off" autocorrect="off" spellcheck="false">

 

@input으로 searchWord라는걸 바인딩

---

 

  data(){
    return{
      search:[data],
      findWord:'',
    }
  }

검색에 사용할 search에 data를 넣어주고(난 이미지)
findWord는 기본값을 빈칸으로 두고 search메소드에 넣을거다

---

methods: {
  searchWord(e) {
    this.findWord = e.target.value
    }
  }

 

methods안에 searchWord를 만들고

input값을 findWord값으로 지정

---

   computed: {
    // this.findWord 가 변하면 그 문자가 포함된 리스트를 계산한다.
    findElement: function () {
        if (this.findWord) {
            return this.search.filter(function (value) {
                return (value.status.indexOf(this.findWord) > -1);
            }, this);
        } else {
            // this.findWord 가 공백일땐 리스트를 그대로 반환한다.
            return this.search;
        }
    },
}

 

computed안에 findElement함수를 만들고
search에대한 filter를 사용한다

findWord에 입력한 단어가 있으면 0을 반납해 search에있는 data를 보여주고
없으면 모두 -1로 아무 data가 보이지않는다.
findWord가 공백이면 search의 모든 data를 보여준다