윅스 (Wix) 코딩 강의 중급 (Intermediate) - 검색창 만들기 (Search a Database) - 데이터 (Data)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 검색창 만들기 (Search a Database) - 데이터 (Data)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 검색창 만들기 (Search a Database) - 데이터 (Data)

강의 내용 요약

다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.

 

웹사이트 방문자가 사이트 내의 콘텐츠르르 빠르게 검색할 수 있도록 하는 기능을 만듭니다.

 

예제 보러가기 (View Example)

ARTICLES | search-a-database

 

예제 에디터 확인하기 (Edit Now)

Log In | Wix

 

 

강의 내용 만드는법

만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.

• 데이터베이스 컬렉션
• 반복 레이아웃 / 리피터
• 데이터셋
• 버튼
• 검색 바
• 드랍 다운 메뉴

 

코드 (Code)

aModule.jsw

// Filename: backend/aModule.jsw (web modules need to have a .jsw extension)

export function multiply(factor1, factor2) {
    return factor1 * factor2;
}



//Use the following code in one of your site's front-end files
//to call the multiply function from backend/aModule.jsw.

/* 
import {multiply} from 'backend/aModule';

$w.onReady(function () {
	
	multiply(4,5).then(product => {
	    console.log(product);
	      // Logs: 20
	})
	.catch(error => {
		console.log(error);
	});
});
*/

 

ARTICLES

import wixData from "wix-data";

$w.onReady(() => {
  loadContinents();
});

let lastFilterTitle;
let lastFilterContinent;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
  if (debounceTimer) {
    clearTimeout(debounceTimer);
    debounceTimer = undefined;
  }
  debounceTimer = setTimeout(() => {
    filter($w('#iTitle').value, lastFilterContinent);  
  }, 500);
}

export function iContinent_change(event, $w) {
	filter(lastFilterTitle, $w('#iContinent').value);
}

function filter(title, continent) {
  if (lastFilterTitle !== title || lastFilterContinent !== continent) {
    let newFilter = wixData.filter();
    if (title)
      newFilter = newFilter.contains('articleTitle', title);
    if (continent)
      newFilter = newFilter.contains('continent', continent);
    $w('#dataset1').setFilter(newFilter);		
    lastFilterTitle = title; 
    lastFilterContinent = continent;
  }
}

function loadContinents() {
  wixData.query('Continents')
	  .find()
	  .then(res => {
	  	let options = [{"value": '', "label": 'All Continents'}];
	  	options.push(...res.items.map(continent => {
	  		return {"value": continent.title, "label": continent.title};
	  	}));
	  	$w('#iContinent').options = options;
	  });

}

 

API

$w.TextInput API

$w.Dropdown API

Wix Data API

 

Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

 

 

연관된 토픽)

윅스 (Wix) 코딩 중급 (Intermediate) - 다이나믹 슬라이드쇼 (Dynamic Slideshow) - 데이터 (Data)

윅스 (Wix) 코딩 고급 (Advanced) - 메가 서치 (Mega Search) - 데이터 (Data)

윅스 (Wix) 코딩 고급 (Advanced) - 드랍다운 체크박스 만들기 (Checkbox Dropdown) - 데이터 (Data)

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

콜비드 - 윅스 코딩 (Corvid - Wix coding)

Search a Database | Corvid by Wix Examples | Wix.com