swiftype autocomplete jquery
1.0.0
Search AutoComplete를위한 First-Party Elastic 사이트 검색 jQuery 플러그인.
요구 사항 :
웹 페이지 헤더에 다음을 포함시킵니다.
모두 함께 다음과 같이 보일 것입니다.
< script type =" text/javascript " src =" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js " > </ script >
< script type =" text/javascript " src =" jquery.swiftype.autocomplete.js " > </ script >
< link type =" text/css " rel =" stylesheet " href =" autocomplete.css " media =" all " />참고 : 이 클라이언트는 탄성 사이트 검색 API 엔드 포인트에 대해서만 개발되었습니다. 추가 컨텍스트는 탄성 사이트 검색 API 문서를 참조 할 수 있습니다.
웹 페이지의 기존 검색 입력 필드에 swiftype 메소드를 적용하기 만하면됩니다. 예를 들어 ID st-search-input 있는 검색 입력 필드에 다음과 같이 추가하십시오.
$ ( '#st-search-input' ) . swiftype ( {
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ; Swiftype 검색 엔진에 할당 된 것과 일치하도록 위에 표시된 engineKey 속성을 변경하십시오. 웹 인터페이스를 사용하는 경우 검색 엔진 키가 대시 보드의 첫 페이지에 나열됩니다.
이 간단한 설치는 기본적으로 검색 엔진에 색인 된 항목에 검색 입력에 입력하는 문자열과 일치합니다. 기본적으로 문자열은 유형 string 로 색인 된 모든 필드와 일치합니다.
이 플러그인은 특정 사용 사례에 따라 유연하게 작성되었습니다. 예를 들어 드롭 다운에서 각 요소에 대한 더 많은 데이터를 검색하거나 데이터가 사용자에게 표시되는 방식을 사용자 정의하거나 자동 완성 쿼리를 검색 엔진의 특정 요소로 제한 할 수 있습니다.
이 모든 일을하는 예를 살펴 보겠습니다. 이 예에서는 Ruby Gem의 QuickStart 튜토리얼을 따르고 이제 예제 검색 엔진에 인덱스 된 서점에 대한 데이터가 있다고 가정 해 봅시다.
API에서 반환하려는 결과 수를 지정하려면 resultLimit 속성을 다음과 같이 설정하십시오.
$ ( '#st-search-input' ) . swiftype ( {
engineKey : 'jaDGyzkR6iYHkfNsPpNK' ,
resultLimit : 20
} ) ; API에서 반환하려는 필드를 지정하려면 fetchFields 속성을 각 문서 유형에 대해 반환하려는 필드를 목록하는 배열이 포함 된 해시로 설정하십시오. 예를 들어, 각 문서에 대한 title , genre 및 published_on 필드를 인덱싱 한 경우 다음과 같이 반환 할 수 있습니다.
$ ( '#st-search-input' ) . swiftype ( {
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ;이 추가 필드는 자동 완성의 각 항목과 함께 반환되며 다음 섹션에서 볼 수 있듯이 렌더링 기능에서 액세스 할 수 있습니다.
이제 각 자동 완성 항목에 대해 더 많은 데이터가 있으므로 항목 렌더링 기능을 사용자 정의하여 사용하여 사용합니다.
기본 렌더링 기능은 다음과 같습니다.
var defaultRenderFunction = function ( document_type , item ) {
return '<p class="title">' + Swiftype . htmlEscape ( item [ 'title' ] ) + '</p>' ;
} ; 추가 필드는 항목 사전의 키로 사용할 수 있으므로 다음과 같이 genre 필드를 사용할 수 있도록이를 사용자 정의 할 수 있습니다.
var customRenderFunction = function ( document_type , item ) {
var out = '<a href="' + Swiftype . htmlEscape ( item [ 'url' ] ) + '" class="st-search-result-link">' + item . highlight [ 'title' ] + '</a>' ;
return out . concat ( '<p class="genre">' + item . highlight [ 'genre' ] + '</p>' ) ;
} ; 이제 옵션 사전에서 renderFunction 속성을 customRenderFunction 에 설정하여 플러그인을 기능을 사용하여 결과를 렌더링하도록 설정하십시오.
$ ( '#st-search-input' ) . swiftype ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'url' ] } , // Fetch the URL field as a raw field.
highlightFields : { 'books' : { 'title' : { 'size' : 60 , 'fallback' : true } , 'genre' : { 'size' : 60 , 'fallback' : true } , 'published_on' : { 'size' : 15 , 'fallback' : true } } } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ; 기본적으로 Swiftype AutoComplete 라이브러리는 사용자가 문서에 대해 인덱스 된 모든 string 필드에 입력하는 문자열과 일치합니다. 따라서 title 필드의 항목 만 일치하는지 확인하려면 searchFields 옵션을 지정할 수 있습니다.
$ ( '#st-search-input' ) . swiftype ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
searchFields : { 'books' : [ 'title' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ; fetchFields 옵션과 마찬가지로 searchFields 사용자 쿼리와 일치하려는 각 Document_Type에 대한 필드 배열이 포함 된 해시를 허용합니다.
이제 AutoComplete 만 소설 genre 이며 in_stock 인 책을 표시하기를 원한다고 가정 해 봅시다. 검색 결과를 제한하려면 검색 결과를 filters 필드에서 사전으로 지정하여 검색 API에 추가 쿼리 조건을 전달할 수 있습니다. 필터 필드의 여러 조항은 논리와 결합됩니다.
$ ( '#st-search-input' ) . swiftype ( {
renderFunction : customRenderFunction ,
fetchFields : { 'books' : [ 'title' , 'genre' , 'published_on' ] } ,
filters : { 'books' : { 'genre' : 'fiction' , 'in_stock' : true } } ,
searchFields : { 'books' : [ 'title' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ; 항목을 클릭 할 때 발생하는 일을 변경하려면 onComplete 핸들러 기능을 제공해야합니다.
기본적으로 드롭 다운에서 항목을 클릭하면 다음 onComplete 핸들러가 실행되며 사용자를 선택한 항목의 url 속성으로 라우팅합니다.
var defaultOnComplete = function ( item , prefix ) {
window . location = item [ 'url' ] ;
} ; 이를 변경하려면 자동 완성을 초기화 할 때 onComplete 옵션에서 새 핸들러 기능을 제공하십시오.
다음은 선택한 항목의 제목으로 입력 값을 업데이트하는 예입니다.
var input ; // Save a reference to the autocomplete dropdown
input = $ ( '#st-search-input' ) . swiftype ( {
onComplete : function ( selectedItem ) {
input . val ( selectedItem [ 'title' ] ) ; // Update the autocomplete dropdown's value
} ,
fetchFields : { 'books' : [ 'title' ] } ,
engineKey : 'jaDGyzkR6iYHkfNsPpNK'
} ) ; 예! 핵심 검색 기능을 찾고 있다면 Swiftype 검색 플러그인을 확인하십시오.
예상대로 작동하지 않는 경우 문제를 열어주십시오.
가장 좋은 방법은 문서를 읽는 것입니다.
Elastic Site Search Community 토론 포럼을 확인할 수 있습니다.
우리는 프로젝트에 기여한 사람들을 환영합니다. 시작하기 전에 몇 가지 메모 ...
MIT © 탄성
모든 기고자들에게 감사합니다!
