Question

我在将搜索结果重定向到要显示结果的页面时遇到问题。想要在标题中包含搜索栏，以便我的结果显示在结果页面或类似内容上。所有这些都是通过教程（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重定向到搜索结果

1 个答案: