Knowledge Graph Search Widget은 사이트의 입력란에 주제를 추가하는 데 도움이 되는 JavaScript 모듈입니다. 사용자가 텍스트를 입력하기 시작하면 위젯이 Knowledge Graph Search API를 사용하여 입력하는 동안 관련 일치 항목을 찾습니다.
기능
- 크로스 브라우저 - 잘 테스트되고 크로스 브라우저인 클로저로 작성되고 순수 JavaScript로 컴파일됩니다.
- 교차 도메인 JSONP 덕분에 프록시 서버가 필요하지 않습니다.
- Google 서버에서 호스팅됩니다.
- 무료 (표준 Google API 약관이 적용됩니다.)
지식 그래프 검색 위젯을 사용해야 하는 이유
- 사용자가 더 적게 입력하여 더 많은 데이터를 입력할 수 있도록 지원하세요.
- 데이터 입력을 더 쉽고 정확하게 할 수 있습니다.
- 이미지와 설명을 제공하여 사용자의 인지 부하를 줄입니다.
- 동일한 항목에 중복된 이름이 없어야 합니다(예: Puff Daddy, P. Diddy, Sean Combs는 모두
/en/sean_combs를 지칭합니다.
웹사이트에 지식 그래프 검색 위젯 추가
페이지에 지식 그래프 검색 위젯을 추가하려면 웹사이트 소스에 다음 코드를 포함하세요. 위젯이 Google Knowledge Graph API에 액세스할 수 있도록 API 키를 사용해야 합니다.
웹사이트에 포함할 코드
HTML 문서의 <head>에 다음을 포함합니다.
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/knowledge/kgsearch/widget/1.0/widget.min.css">
<style>
.kge-search-picker {
width: <DROPDOWN_MENU_WIDTH>;
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/knowledge/kgsearch/widget/1.0/widget.min.js"></script>
그런 다음 문서 <body>에서 다음과 같이 일치하는 ID가 있는 입력 필드를 사용합니다.
<input type="text" id="myInput">
<script type="text/javascript">
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
</script>
API 키 획득 및 사용
API 키를 획득하면 애플리케이션에서 추천 요청을 할 수 있습니다. API 키가 없으면 위젯이 작동하지 않습니다. 아직 API 키가 없는 경우 기본 요건 페이지의 안내에 따라 API 키를 가져오세요.
키를 획득한 후에는 다음과 같은 코드를 사용하여 Knowledge Graph Search Widget에 전달합니다.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
검색 위젯 구성하기
JavaScript는 위와 같이 빈 세 번째 인수로 KGSearchWidget()를 호출할 수 있습니다. 또는 이 세 번째 인수를 사용하여 다양한 필터링, 제약 조건, 이벤트 핸들러를 지정하는 구성 객체를 전달할 수 있습니다.
구성 객체 전달
지식 그래프 검색 위젯은 선택적 구성 매개변수를 허용합니다. 이렇게 하면 여러 구성 옵션으로 데이터 구조를 채우고 다음 예와 같이 위젯에 전달할 수 있습니다.
var config = {
'limit': 10,
'languages': ['en', 'fr'],
'types': ['Person', 'Movie'],
'maxDescChars': 100,
};
config['selectHandler'] = function(e) {
alert(e.row.name + ' selected');
};
config['highlightHandler'] = function(e) {
alert(e.row.name + ' highlighted');
};
KGSearchWidget(<API_KEY>, document.getElementById('myInput'), config);
구성 옵션
다음 표에서는 지식 그래프 검색 위젯에 전달할 수 있는 구성 옵션을 설명합니다.
| 이름 | 유형 | 기본값 | 설명 |
|---|---|---|---|
| 언어 | Array(String) | 영어 |
지정된 모든 언어로 검색이 실행되도록 하는 언어 코드(ISO 639-1에 정의됨) 목록입니다. 결과는 나열된 첫 번째 언어로 순위가 지정되고, 항목의 이름이 있는 목록의 첫 번째 언어로 표시됩니다. 영어가 가장 광범위하게 지원됩니다. 이 값은 Search API에 투명하게 전달됩니다. 예를 들어 언어가 [fr, en]로 설정된 경우 |
| 제한 | 정수 | 20 | 드롭다운 메뉴의 최대 결과 수입니다. |
| 유형 | Array(String) | 모든 유형 | 제공된 항목 유형과 일치하는 항목만 반환합니다. 이 매개변수를 생략하면 모든 항목 유형의 일치 항목이 반환됩니다. |
| maxDescChars | 정수 | 무제한 | 각 항목의 세부 설명에 포함할 수 있는 최대 문자 수입니다. maxDescChars보다 긴 콘텐츠는 잘립니다. |
| selectHandler | 함수 | null |
행이 선택될 때 호출할 콜백 함수입니다. 콜백 함수의 인수는 이벤트이며 선택된 행에 관한 정보가 포함된 row 속성이 포함됩니다. 이 콜백 사용 예는 이벤트 핸들러 사용을 참고하세요.
|
| highlightHandler | 함수 | null |
사용자가 행 위로 마우스를 가져갈 때 호출되는 콜백 함수입니다.
콜백 함수의 인수는 이벤트이며 선택된 행에 관한 정보가 포함된 row 속성이 포함됩니다.
많은 기기 (예: 터치 스크린 모바일 하드웨어)에서는 이 이벤트를 생성할 수 없습니다. 이 콜백 사용 예시는 이벤트 핸들러 사용을 참고하세요. |
이벤트 핸들러 구현
지식 그래프 검색 위젯은 초기화된 입력의 컨텍스트 내에서 다음 이벤트를 트리거합니다. 구성 객체에서 콜백 함수를 제공하여 이러한 이벤트의 핸들러를 구현할 수 있습니다.
selectHandler - 이 이벤트는 사용자가 추천 목록에서 항목을 선택할 때 트리거됩니다. 이벤트에는 event.row이 선택된 행의 데이터인 데이터 객체가 함께 제공됩니다.
event.row.name 및 event.row.id은 선택한 항목의 이름과 ID를 나타냅니다. 다음 코드 프래그먼트는 selectHandler가 하는 작업을 테스트하는 방법을 보여줍니다.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"selectHandler": function(e) {
alert("selected " + e.row.name);
}
});
highlightHandler - 이 이벤트는 사용자가 항목 위로 마우스를 가져가 항목이 강조 표시될 때 트리거됩니다. 다음 스니펫은 highlightHandler의 기능을 테스트하는 방법을 보여줍니다.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"highlightHandler": function(e) {
alert("highlighted " + e.row.name);
}
});
고객센터
Knowledge Graph Search API에 관해 질문, 버그 신고 또는 의견이 있는 경우 도움말 포럼을 사용하세요.