1
알 레일리 아를 설치하면 레일 레일 어플리케이션을 효율적으로 구현할 수 있습니다 : 내 데이터베이스에서 찾고있는 것을 찾을 수 있기 때문에 알골 리아 검색 바가 잘 구성되어 있습니다. 사용자는 바에서 자동 완성 기능이있는 검색 창을 사용하여 핀을 찾을 수 있습니다.레일 : Algolia 검색 자동 완성의 결과를 클릭하십시오.
하지만 핀 페이지로 이동하는 결과를 허용하고 싶습니다.
<!-- algolia search -->
<input class="typeahead" type="text" placeholder="Search for users by name..." id="user-search" spellcheck="false" />
<!-- JQuery -->
<script src="//cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script>
<!-- Typahead.js is used to display the auto-completion menu -->
<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
<!-- Hogan.js is used to render the hits using Mustache.js templating -->
<script src="//cdn.jsdelivr.net/hogan.js/3.0.0/hogan.common.js"></script>
<!-- Algolia -->
<script src="//cdn.jsdelivr.net/algoliasearch/latest/algoliasearch.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Replace the following values by your ApplicationID and ApiKey.
var algolia = new AlgoliaSearch('MYAPPID', 'MYAPPPW');
// replace YourIndexName by the name of the index you want to query.
var index = algolia.initIndex('Pin');
// Mustache templating by Hogan.js (http://mustache.github.io/)
var template = Hogan.compile('<div class="hit">' +
'<div class="name">' +
'{{{ _highlightResult.description.value }}} ' +
'({{{ _highlightResult.details.value }}})' +
'</div>' +
'</div>');
// typeahead.js initialization
$('#user-search').typeahead(null, {
source: index.ttAdapter({ hitsPerPage: 5 }),
displayKey: 'email',
templates: {
suggestion: function(hit) {
// select matching attributes only
hit.matchingAttributes = [];
for (var attribute in hit._highlightResult) {
if (attribute === 'name' || attribute == 'company') {
// already handled by the template
continue;
}
// all others attributes that are matching should be added in the matchingAttributes array
// so we can display them in the dropdown menu. Non-matching attributes are skipped.
if (hit._highlightResult[attribute].matchLevel !== 'none') {
hit.matchingAttributes.push({ attribute: attribute, value: hit._highlightResult[attribute].value });
}
}
// render the hit using Hogan.js
return template.render(hit);
}
}
});
});
</script>
<!-- /algolia search -->
사용자가 결과를 클릭 할 때 핀 표시보기로 리디렉션되기를 원합니다. 그래서
내 핀의 ADRESS로 호건 링크이 링크를 렌더링하는 방법을 모른다는, 예를 들면 : 핀 2 myapp.com/pins/2
해결 : 는 추가 hoogan 템플릿에 연결하십시오. 여기서 slug는 나를 위해 friendly_id 젬으로 수정 된 URL입니다.
// Mustache templating by Hogan.js (http://mustache.github.io/)
var template = Hogan.compile('<div class="hit">' +
'<a href="http://myapp.com/pins/{{{slug}}}" class="name">' +
'{{{ _highlightResult.description.value }}} ' +
'({{{ _highlightResult.details.value }}})' +
'</a>' +
'</div>');
@Shipow 덕분에 안녕을 사용하는 예입니다 -하지만 난의 관련 쇼보기로 방법을 리디렉션 수 핀? 나는 더 많은 정보로 나의 질문을 편집 할 것이다. 고마워. – zacchj
에는 ''솔루션을 사용하여 답변이 업데이트되었습니다. – zacchj