윅스 (Wix) 코딩 예제 - 컬렉션 데이터 검색 기능 추가하기 (Wix Code Tutorial: Adding Collection Data Search Functionality)

윅스 (Wix) 코딩 예제 - 컬렉션 데이터 검색 기능 추가하기 (Wix Code Tutorial: Adding Collection Data Search Functionality)

 

 

 

설명)

 

이 글은 데이터베이스 컬렉션과 데이타세트에 대한 이해와 그것이 윅스 코드(Wix Code)에서 어떻게 사용되는지를 전제로 합니다.

 

윅스 코드(Wix Code)를 사용하면 사이트에 데이터베이스 컬렉션을 추가하고 여러 가지 방법으로 데이터를 표시할 수 있습니다. 사이트 방문자는 해당 데이터를 검색할 수도 있습니다. 사용자 입력 요소를 페이지에 추가한 다음 검색을 가능하게하는 코드를 추가하여 이 검색 기능을 사이트에 추가할 수 있습니다.

 

방문자가 컬렉션을 검색할 수 있는 여러 가지 방법이 있습니다. 이 글에서는 다음 옵션에 대해 설명합니다.

- 방문자가 검색 문자열을 입력하는 입력 입력란(필드) 추가합니다.

- 방문자가 목록에서 값을 선택하는 드롭다운 목록을 추가합니다.

 

결과를 표시할 수는 있지만 페이지에 표시하려는 경우 이 글에서는 표(Table)에 데이터를 표시하는 방법에 대해 설명합니다. 예제가 끝나면 결과를 표시할 준비가 될 때까지 선택적으로 표(Table)을 접는 방법에 대해서도 설명합니다.

 

 

입력 요소를 사용하여 검색하기 (Search Using an Input Element)

컬렉션에 요리법 목록이 있고 사용자가 사용자 입력 요소에 이름을 입력하여 검색할 수 있게하려는 경우, 방문자가 검색 버튼을 클릭하면 결과가 같은 페이지의 표(Table)에 표시됩니다. 이렇게하려면 사용자가 검색어를 입력하는 입력 요소, 검색을 활성화하는 버튼 및 결과를 표시하는 테이블을 페이지에 추가합니다. 그런 다음 표(Table)에 사용자 입력과 일치하는 데이터만 표시하도록 코드를 추가합니다. 이 예제에서는 표(Table)이 데이터세트에 연결되어 있지 않으므로 데이터 구조와 일치하도록 표(Table) 열을 설정하는 데 코드가 필요합니다.

 

 

1. 입력, 버튼 및 표(Table) 요소를 페이지에 추가합니다. (Add the input, button, and table elements to the page)

1. 페이지에 입력 상자, 버튼 및 표(Table)를 추가합니다. 원하는대로 사용자 정의할 수 있습니다. 예를 들어 버튼 텍스트를 "검색"으로 변경하고 입력란의 자리 표시자 텍스트에 "요리법 검색"이라고 읽도록 구성할 수 있습니다.

2. 방금 추가한 각 요소의 ID를 변경하여 의미가 있도록 합니다.

 

2. 검색 문자열을 입력하기 위한 코드를 추가합니다. (Add the code for inputting a search string)

이제 검색 버튼을 클릭하여 사용자가 입력 상자에 입력한 내용에 따라 검색이 수행되도록 구성합니다. 그런 다음 결과를 추가한 표(Table)에 채워야합니다.

 

1. Wix Data API 용 import 문을 코드 상단에 추가합니다.

 

import wixData from "wix-data";

 

 

2. 버튼에 onClick 이벤트를 추가합니다. 페이지에 다음 코드가 추가되었습니다.

 

export function searchButton_click(event) {
 //Add your code for this event here: 
}

 

3. 다음 코드를 사용하여 "Add your code for this event here"라고 표시된 위치를 바꿉니다.

 

// Runs a query on the "recipes" collection
wixData.query("recipes") 
  // Query the collection for any items whose "Name" field contains  
  // the value the user entered in the input element
  .contains("name", $w("#searchBox").value)
  .find()  // Run the query
  .then(res => {   
     // Set the table data to be the results of the query     
    $w("#resultsTable").rows = res.items; 
   });

 

 

3. 테이블 열 정의 (Define the table columns)

표(Table)이 데이터세트에 연결되어 있지 않으므로 표(Table) API를 사용하여 열을 정의해야합니다. 이를 위해 각 열의 속성과 값을 나열하는 JSON 객체를 정의합니다. 이 코드는 onReady 함수에 저장되며 다음과 같습니다.

 

$w.onReady(function () {    
    $w("#resultsTable").columns = [
      {
        "id": "col1",       // ID of the column for code purposes
        // The field key in the collection whose data this column displays  
        "dataPath": "field1", 
        "label": "Field 1", // The column header
        "width": 100,       // Column width
        "type": "string",   // Data type for the column
        // Path for the column if it contains a link  
        "linkPath": "link-field-or-property"  
      },
      {
        "id": "col2",
        "dataPath": "field2",
        "label": "Field 2",
        "visible": true,
        "type": "image",
        "linkPath": "link-field-or-property"
      } //,
      // more column objects here if necessary
      // ...
      // ...  
    }];
});

 

 

 

예를 들어, 요리법 컬렉션에서 검색 결과를 보여주는 표(Table)의 컬럼 정의는 다음과 같을 것입니다 :

 

$w.onReady(function () {
 $w("#resultsTable").columns = [{
  "id": "col1",
  "dataPath": "title",
  "label": "Recipe",
  "type": "string",
 }, {
  "id": "col2",
  "dataPath": "course",
  "label": "Course",
  "type": "string",
 }, {
  "id": "col3",
  "dataPath": "meal",
  "label": "Meal",
  "type": "string",
 }];
});

 

 

 

이 모든 코드를 페이지 코드에 직접 복사할 수 있습니다. 다음 요소 ID와 컬렉션 이름을 사이트의 요소 ID로 바꿔야합니다. 요소 위에 마우스를 대면 ID가 표시됩니다.

 

- wixData.query("recipes") - 컬렉션의 이름으로 recipes 를 바꿉니다.

- .contains("name", $w("#searchBox") - 검색중인 컬렉션의 입력란(필드)의 입력란(필드) 키와 이름을 바꿉니다. searchBox를 방문자가 검색하기 위해 문자열을 입력하는 입력 상자의 요소 ID로 바꿉니다.

- $w("#resultsTable") - resultsTable을 검색 결과를 표시하는 표(TablE)의 요소 ID로 바꿉니다.

- "dataPath value"- 컬렉션의 입력란(필드) 키로 바꿉니다.

 

 

이제 페이지를 미리보고 모든 것이 예상대로 작동하는지 확인할 수 있습니다.

 

 

 

드롭다운 요소를 사용하여 검색하기 (Search Using a Dropdown Element)

이제 사용자가 코스 드롭다운 목록에서 값을 선택하여 요리법을 필터링 할 수 있게 한다고 가정해 봅니다. 코스 목록이 이미 컬렉션에 있습니다. 먼저 드롭다운을 추가하고 컬렉션에 연결하여 컬렉션에서 직접 옵션을 채웁니다. 그런 다음 표(Table)를 추가하여 선택 항목을 표시하고 마지막으로 코드를 작성합니다.

 

 

1. 드롭다운 및 표(Table) 요소를 페이지에 추가합니다. (Add the dropdown and table elements to the page)

1. 페이지에 드롭다운 목록 요소를 추가합니다.

2. 드롭다운 연결 패널의 목록 연결 섹션에서 다음을 수행합니다.

a. 드롭다운 연결 목록 항목 토글을 선택합니다.

b. 컬렉션에 연결된 데이터세트에 목록을 연결합니다.

c. 라벨 및 값 연결 대상에서 드롭다운 옵션으로 사용할 열 입력란(필드)를 선택합니다.

3. 페이지 요소를 페이지에 추가합니다.

 

 

2. 컬렉션 검색하기 위해 드롭다운 선택에 대한 코드를 추가하기 (Add the code for the dropdown selection to search the collection)

이제 코드를 추가하여 드롭다운의 사용자 선택이 컬렉션 검색에 사용됩니다.

 

1. Wix Data API 용 import 문을 코드 상단에 추가합니다.

 

import wixData from "wix-data";

 

 

2. 드롭다운 목록에 onChange 이벤트를 추가합니다. 페이지에 다음 코드가 추가되었습니다.

 

export function searchList_change(event) {
 //Add your code for this event here: 
}

 

3. 다음 코드를 사용하여 "Add your code for this event here"라고 표시된 위치를 바꿉니다.

 

// Runs a query on the "recipes" collection
wixData.query("recipes") 
  // Query the collection for any items whose "Name" field contains  
  // the value the user selected in the dropdown
  .contains("course", $w("#searchList").value)
  .find()  // Run the query
  .then(res => {   
     // Set the table data to be the results of the query
     $w("#resultsTable").rows = res.items; 
   });

 

 

 

 

3. 표(Table) 열 정의 (Define the table columns)

앞의 예에서 지시 사항에 따라 결과 표(Table)을 정의합니다. 그런 다음 페이지를 미리보고 모든 것이 예상대로 작동하는지 확인합니다.

 

 

 

선택적으로 로드시 표(Table) 접기 (Optionally Collapse the Table on Load)

두 검색을 설정하는 방법은 페이지가 로드될 때 빈 표(Table)가 나타납니다. 표(Table)를 접어서 페이지의 공간을 차지하지 않고 검색이 수행된 후에만 ​​확장되도록 구성할 수 있습니다.

 

1. 표(Table)의 속성 패널에서 축소시 축소를 선택합니다.

2. 검색을 위해 추가한 코드에서 데이터 컬렉션에 대한 쿼리 결과가 채워지는 표(Table)을 지시한 위치 바로 아래에 이 행을 추가하여 표(Table)을 확장합니다.

 

$w("#resultsTable").expand();

 

 

resultsTable을 표(Table) ID로 바꿉니다.

예를 들어 드롭다운으로 검색을 수행하는 코드는 인덱스 키가 resultsTable 인 표(Table)에서 다음과 같이 표시됩니다.

 

wixData.query("recipes")
    .contains("name", $w("#searchList").value)   
    .find()
    .then(res => {   
      $w("#resultsTable").rows = res.items; 
      $w("#resultsTable").expand();
    });
}

 

 

 

 

 

 

연관된 토픽)

윅스 (Wix) 코딩 - 데이터 관리자에서 데이터 내보내기 (Exporting Data in the Data Manager)

윅스 (Wix) 코딩 - 데이터 관리자에서 데이터 가져오기 알아보기 (About Importing Data in the Data Manager)

윅스 (Wix) 코딩 예제 - 데이터베이스 컬렉션에 사용자 입력 저장 양식 만들기 (Wix Code Tutorial: Creating a Form to Store User Input in a Database Collection)

윅스 (Wix) 코딩 예제 - 코딩으로 컬렉션 데이터 가져오기 및 내보내기 (Wix Code Tutorial: Importing and Exporting Collection Data with Code)

윅스 (Wix) 코딩 - 데이터 관리자에서 데이터 가져오기 (Importing Data in the Data Manager)

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-adding-collection-data-search-functionality