swiftype search jquery
v1.1.0
웹사이트 검색을 위한 자사 Elastic Site Search jQuery 플러그인입니다.
요구사항:
웹페이지 헤더에 다음을 포함하세요.
모두 합쳐서 다음과 같아야 합니다:
< script type =" text/javascript " src =" https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > </ script >
< script type =" text/javascript " src =" jquery.swiftype.search.js " > </ script >
< link type =" text/css " rel =" stylesheet " href =" search.css " media =" all " />참고: 이 클라이언트는 Elastic Site Search API 엔드포인트용으로만 개발되었습니다. 추가 내용은 Elastic Site Search API 설명서를 참조하세요.
페이지에 양식, 양식 내 입력 필드, 결과 컨테이너 등 최소한 세 가지 요소를 포함하는 것부터 시작하세요.
< form >
< input type =" text " placeholder =" Search " id =" st-search-input " />
</ form >
< div id =" st-results-container " > </ div > 웹페이지 양식 내의 기존 검색 입력 필드에 Swiftype 메소드를 적용하고 결과에 대한 컨테이너를 제공합니다. 예를 들어 다음과 같이 ID가 st-search-input 인 검색 입력 필드에 추가합니다.
$ ( '#st-search-input' ) . swiftypeSearch ( {
resultContainingElement : '#st-results-container' ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ; 위에 표시된 engineKey 속성을 Swiftype 검색 엔진에 할당된 속성과 일치하도록 변경하세요. 웹 인터페이스를 사용하는 경우 검색 엔진 키가 대시보드의 첫 번째 페이지에 나열됩니다.
이 플러그인은 특정 사용 사례에 따라 유연하게 작성되었습니다. 예를 들어 각 결과에 대해 더 많은 데이터를 검색하거나, 데이터가 사용자에게 표시되는 방식을 사용자 정의하거나, 검색 쿼리를 검색 엔진의 특정 요소로 제한할 수 있습니다.
이 모든 작업을 수행하는 예제를 살펴보겠습니다. 이 예에서는 Ruby Gem에 대한 QuickStart 튜토리얼을 따랐고 이제 예제 검색 엔진에 색인화된 Bookstore에 대한 데이터가 있다고 가정합니다.
페이지당 결과 수를 지정하려면 perPage 속성을 사용하세요.
$ ( '#st-search-input' ) . swiftypeSearch ( {
engineKey : 'jaDGyzkR6iYHkfNsPpNK' ,
perPage : 20
} ) ;API에서 허용되는 최대값은 100입니다.
검색 중에 쿼리되는 모든 필드는 결과의 하이라이트 속성에 가장 일치하는 항목(있는 경우)을 반환합니다. 이 양식의 모든 스니펫에는 인코딩된 원본 텍스트의 HTML 엔터티가 있습니다. 실제 강조 표시는 (인코딩되지 않은) <em> 태그를 사용하여 지정됩니다.
highlightFields 옵션을 사용하여 하이라이트 속성에 반환되는 필드를 사용자 정의할 수 있습니다.
$ ( '#st-search-input' ) . swiftypeSearch ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
highlightFields : { 'books' : { 'body' : { 'size' : 300 , 'fallback' : true } } }
} ) ; highlightFields 옵션은 각 문서 유형의 각 개체에 대해 강조 표시하려는 필드가 포함된 해시를 허용합니다. 각 필드에 대해 조각에 포함할 최대 문자 수로 size 지정합니다. 해당 필드에 강조표시를 사용할 수 없는 경우 강조표시되지 않은 코드 조각을 강제로 포함하려면 fallback true로 설정하세요.
highlightFields 의 추가 예는 custom.html 파일을 참조하세요.
API에서 반환할 필드를 지정하려면 fetchFields 속성을 각 문서 유형에 대해 반환할 필드를 나열하는 배열이 포함된 해시로 설정하세요. 예를 들어, 각 문서에 대해 indexed title , genre 및 published_on 필드가 있는 경우 다음과 같이 반환되도록 할 수 있습니다.
$ ( '#st-search-input' ) . swiftypeSearch ( {
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;이러한 추가 필드는 각 항목과 함께 반환되며 다음 섹션에 표시된 대로 렌더링 기능에서 액세스할 수 있습니다.
이제 각 결과 항목에 대한 더 많은 데이터가 있으므로 이를 활용하기 위해 항목 렌더링 기능을 사용자 정의할 수 있습니다.
기본 렌더링 기능은 다음과 같습니다.
var defaultRenderFunction = function ( document_type , item ) {
return '<div class="st-result"><h3 class="title"><a href="' + item [ 'url' ] + '" class="st-search-result-link">' + item [ 'title' ] + '</a></h3></div>' ;
} ; 추가 필드는 항목 사전의 키로 사용할 수 있으므로 다음과 같이 genre 필드를 활용하도록 이를 사용자 정의할 수 있습니다.
var customRenderFunction = function ( document_type , item ) {
var out = '<a href="' + item [ 'url' ] + '" class="st-search-result-link">' + item [ 'title' ] + '</a>' ;
return out . concat ( '<p class="genre">' + item [ 'genre' ] + '</p>' ) ;
} ; 이제 옵션 사전의 renderFunction 속성을 customRenderFunction 으로 설정하여 플러그인에 함수를 사용하여 결과를 렌더링하도록 지시하세요.
$ ( '#st-search-input' ) . swiftypeSearch ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ; 기본적으로 Swiftype 검색 라이브러리는 제출된 쿼리를 문서에 대해 색인화된 string 또는 text 필드와 일치시킵니다. 따라서 예를 들어 title 필드의 항목만 일치하는지 확인하려면 searchFields 옵션을 지정할 수 있습니다.
$('#st-search-input').swiftypeSearch({
renderFunction: customRenderFunction,
fetchFields: {'books': ['title','genre','published_on']},
searchFields: {'books': ['title']},
engineKey: 'jaDGyzkR6iYHkfNsPpNK'
});
fetchFields 옵션과 마찬가지로 searchFields 사용자 쿼리와 일치시키려는 각 document_type에 대한 필드 배열이 포함된 해시를 허용합니다.
이제 결과에 소설 genre 에 속하고 재고가 있는 책만 표시하려고 한다고 가정해 보겠습니다. 검색 결과를 제한하려면 filters 필드에 사전으로 지정하여 추가 쿼리 조건을 검색 API에 전달할 수 있습니다. 필터 필드의 여러 절은 AND 논리로 결합됩니다.
$ ( '#st-search-input' ) . swiftypeSearch ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
filters : { 'books' : { 'genre' : 'fiction' , 'in_stock' : true } } ,
searchFields : { 'books' : [ 'title' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;어떤 경우에는 새 검색을 수동으로 실행해야 할 수도 있습니다. 이를 위해 다음 방법을 사용할 수 있습니다. 이러한 경우의 예로는 사용자가 필터 적용을 선택하고 새 쿼리를 실행해야 하는 경우가 있습니다.
Swiftype.reloadResults();
예! 자동 완성 기능을 찾고 있다면 Swiftype Autocomplete 플러그인을 확인해 보세요.
예상대로 작동하지 않는 경우 문제를 열어주세요.
가장 좋은 방법은 설명서를 읽는 것입니다.
Elastic Site Search 커뮤니티 토론 포럼을 확인해 보세요.
우리는 프로젝트에 참여하는 분들을 환영합니다. 시작하기 전에 몇 가지 참고 사항이 있습니다.
MIT © 탄성
모든 기여자에게 감사드립니다!
