Algolia 重定向到搜索结果 [英] Algolia redirect to search results

问题描述

我在将搜索结果重定向到要显示结果的页面时遇到问题.希望在标题中有搜索栏，以便我的结果显示在结果页面或类似的东西上.一切都是通过教程 (Laracasts) 完成的，仍在学习 javascript，所以我有点卡在这里.. 一些帮助会很棒！

index.blade.php

<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script><script src="http://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.1/vue.js"></script><脚本>新的 Vue({el: '身体',数据: {询问: ''，用户:[]},准备好:函数(){this.client = algoliasearch('', '');this.index = this.client.initIndex('test_drive_contacts');$('#typeahead').typeahead(null, {来源:this.index.ttAdapter(),displayKey: '名字',模板:{建议:功能(命中){返回 '​​
'+'<h4 class="high">'+ hit._highlightResult.firstname.value + '</h4>'+'<h5 class="high">'+ hit._highlightResult.company.value + '</h5>'+ '</div>';}}}).on('typeahead:select', function (e, 建议) {this.query=suggestion.firstname;}.bind(this));},方法: {搜索:函数(){this.index.search(this.query, function (error, results) {this.users = results.hits;}.bind(this));}}});

这是搜索输入:

<article v-repeat="用户:用户"><h2>@{{ user.firstname }}</h2><h4>@{{ user.company }}</h4</文章>

解决方案

在 JavaScript 中将用户重定向到页面就像做一样简单

window.location = 'your_url_here'

如果您只是想在用户键入 Enter 时重定向到 /search?q=query 页面，那么就像包装您要输入的内容一样简单在表单中使用.

<input type="search" id="your-input" name="q"/></表单>

如果您想重定向到项目页面，typeahead:select 事件会为您提供选定的选项:

$('#your-input').typeahead(/* ... */).on('typeahead:select', function (e, 建议) {window.location = 建议.url;});

I'm having problem with redirecting search results to page that I want to display results. Want to have search bar in header so that my results are displayed on results page or something similar. All was done by tutorial (Laracasts), still learning javascript, so I'm a bit stuck here.. Some help would be great!

index.blade.php

<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="http://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.1/vue.js"></script>
<script>
    new Vue({
        el: 'body',

        data: {
            query: '',
            users: []
        },

        ready: function () {
            this.client = algoliasearch('', '');
            this.index = this.client.initIndex('test_drive_contacts');


            $('#typeahead').typeahead(null, {
                        source: this.index.ttAdapter(),
                        displayKey: 'firstname',
                        templates: {
                            suggestion: function (hit) {
                                return '<div>' +
                                        '<h4 class="high">' + hit._highlightResult.firstname.value + '</h4>' +
                                        '<h5 class="high">' + hit._highlightResult.company.value + '</h5>'
                                        + '</div>';
                            }
                        }
                    })
                    .on('typeahead:select', function (e, suggestion) {
                        this.query = suggestion.firstname;
                    }.bind(this));
        },


        methods: {
            search: function () {
                this.index.search(this.query, function (error, results) {
                    this.users = results.hits;
                }.bind(this));
            }
        }
    });

</script>

This is the search input:

<input id="typeahead" type="text" class="form-control" v-model="query"
                                   v-on="keyup: search | key 'enter'">

<article v-repeat="user: users">
    <h2>@{{ user.firstname }}</h2>
    <h4>@{{ user.company }}</h4
</article>

解决方案

Redirecting users to a page in JavaScript is as easy as doing

window.location = 'your_url_here'

If you're just looking to redirect to a /search?q=query page when the user types Enter, that's as easy as wrapping the input you're using inside a form.

<form action="/search" method="GET">
  <input type="search" id="your-input" name="q" />
</form>

If you want to redirect to an item page, the typeahead:select event gives you the selected option :

$('#your-input')
  .typeahead(/* ... */)
  .on('typeahead:select', function (e, suggestion) {
    window.location = suggestion.url;
  });

这篇关于Algolia 重定向到搜索结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！