Algolia 重定向到搜索结果

Question

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

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>

这是搜索输入：

<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>

Answer 1

将用户重定向到 JavaScript 中的页面非常简单

window.location = 'your_url_here'

如果您只是希望在用户键入 Enter 时重定向到 /search?q=query 页面，这就像将您正在使用的输入包装在一个表格.

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

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

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

Algolia 重定向到搜索结果

Algolia redirect to search results

javascript

typeahead.js

vue.js

algolia