阿尔及利亚重定向到搜索结果 [英] Algolia redirect to search results

问题描述

我在将搜索结果重定向到要显示结果的页面时遇到问题。希望标题中有搜索栏，以便我的结果显示在结果页面或类似内容上。所有操作都是通过教程（Laracasts）完成的，仍在学习JavaScript，因此我有点受困于此。一些帮助会很棒！

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

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>

推荐答案

在JavaScript中将用户重定向到页面很容易

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

window.location = 'your_url_here'

如果您只是想在用户键入 Enter <时重定向到 / search？q = query 页面/ kbd>，就像将您要使用的输入包装在表单中一样简单。

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>

如果您要重定向到项目页面，请输入 typeahead：select 事件为您提供了选定的选项：

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;
  });

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