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