Algolia redirect to search results

问题

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>

回答1:

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

来源：https://stackoverflow.com/questions/35173026/algolia-redirect-to-search-results

标签

javascript

typeahead.js

Vue.js

algolia