0

結果を表示したいページに検索結果をリダイレクトする際に問題があります。検索結果が結果ページなどに表示されるように、ヘッダーに検索バーを配置したいと考えています。すべてはチュートリアル (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>
4

1 に答える 1