Vue.js 2.x 입력 검색 제안 | 프로그래밍 튜토리얼

소개

이 프로젝트에서는 Vue.js 2.x 를 사용하여 입력 검색 제안 기능을 구현하는 방법을 배우게 됩니다. 이 기능은 사용자가 검색 입력란에 입력할 때 일치하는 데이터 목록을 제공하기 위해 웹 애플리케이션에서 일반적으로 사용됩니다.

👀 미리보기

🎯 과제

이 프로젝트에서는 다음을 배우게 됩니다.

데이터 테이블에서 테이블 헤더의 첫 글자를 대문자로 만드는 방법
사용자의 입력을 기반으로 검색 제안 기능을 구현하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

v-for 및 v-model과 같은 Vue.js 지시어를 사용하여 DOM 을 조작합니다.
검색 결과를 필터링하고 표시하기 위해 Vue.js 에서 계산된 속성 (computed properties) 을 생성합니다.
테이블 및 검색 입력에 기본적인 스타일을 적용합니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요.

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다.

├── index.html
└── js
    └── vue.js

그 중:

js/vue.js는 Vue 2.x 파일입니다.
index.html은 페이지 레이아웃 및 기능 구현 로직 코드입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

아직 검색 제안 기능이 구현되지 않았습니다.

테이블 헤더 대문자 처리

이 단계에서는 데이터 테이블에서 테이블 헤더의 첫 글자를 대문자로 만드는 방법을 배우게 됩니다.

코드 편집기에서 index.html 파일을 엽니다.
HTML 코드에서 테이블 헤더 섹션을 찾습니다.

<thead>
  <tr>
    <td v-for="col in columns">
      {{col.slice(0,1).toUpperCase() + col.slice(1)}}
    </td>
  </tr>
</thead>

v-for 지시어는 columns 배열을 반복하고 해당 테이블 헤더를 표시하는 데 사용됩니다. 코드 {{col.slice(0,1).toUpperCase() + col.slice(1)}}는 각 열 이름의 첫 글자를 대문자로 만드는 데 사용됩니다.
- col.slice(0,1)은 열 이름의 첫 번째 문자를 추출합니다.
- .toUpperCase()는 첫 번째 문자를 대문자로 변환합니다.
- + col.slice(1)은 대문자화된 첫 번째 문자를 나머지 열 이름과 연결합니다.
index.html 파일을 저장하고 페이지를 새로 고칩니다. 이제 첫 글자가 대문자로 표시된 테이블 헤더를 볼 수 있습니다.

검색어 추천 기능 구현

이 단계에서는 검색 제안 기능을 구현하는 방법을 배우게 됩니다.

index.html 파일에서 검색 입력 필드와 해당 Vue.js 코드를 찾고, 다음과 같이 일부 코드를 추가합니다.

<span>Search for names: </span>
<!-- Add v-model code -->
<input placeholder="Enter the name to search" v-model="searchQuery" />

data: {
  searchQuery: "",
  // ... other data properties
},

// The following code is the code that needs to be added
computed: {
  newData() {
    return this.data.filter((item) => {
      return item.name
        .toLowerCase()
        .includes(this.searchQuery.toLowerCase());
    });
  }
}

searchQuery 데이터 속성은 v-model 지시어를 사용하여 검색 입력 필드에 바인딩됩니다. 이를 통해 Vue.js 인스턴스는 사용자의 입력을 추적할 수 있습니다.
newData 계산된 속성은 searchQuery 값을 기반으로 data 배열을 필터링합니다. 각 데이터 항목의 name 속성이 검색 쿼리를 포함하는지 (대소문자 구분 없이) 확인합니다.
필터링된 데이터는 테이블 본문에 표시됩니다.

<tbody>
  <tr v-for="entry in newData">
    <td v-for="col in columns">{{entry[col]}}</td>
  </tr>
</tbody>

v-for 지시어는 newData 배열을 반복하고 각 데이터 항목을 테이블 행에 표시하는 데 사용됩니다.
index.html 파일을 저장하고 페이지를 새로 고칩니다. 이제 예상대로 작동하는 검색 제안 기능을 볼 수 있습니다.

이제 제공된 Vue.js 프로젝트에서 입력 검색 제안 기능의 구현을 완료했습니다. 완성된 결과는 다음과 같습니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

Vue.js 로 검색 제안 구현하기

소개