Skip to content

Instantly share code, notes, and snippets.

@JeffreyWay
Created June 23, 2015 22:12
Show Gist options
  • Save JeffreyWay/a23d8403b667ea28b22b to your computer and use it in GitHub Desktop.
Save JeffreyWay/a23d8403b667ea28b22b to your computer and use it in GitHub Desktop.
Laracasts.com Episode: Algolia + JavaScript + Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Algolia with JS</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<input type="text" v-model="query" v-on="keyup: search | key 'enter'">
<div class="results">
<article v-repeat="user: users">
<h2>{{{ user._highlightResult.name.value }}}</h2>
<h4 v-html="user._highlightResult.company.value"></h4>
</article>
</div>
<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('YOUR_APP_ID', 'YOUR_APP_SEARCH_KEY');
this.index = this.client.initIndex('test_drive_contacts');
},
methods: {
search: function() {
this.index.search(this.query, function(error, results) {
this.users = results.hits;
}.bind(this));
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment