diff --git a/package-lock.json b/package-lock.json
index 7918a5251c2c61a91ceb921188cb82252b2c8d0a..b4d139c5ec14d8d0e2be9eaf266ef788210a1e10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -938,6 +938,11 @@
         }
       }
     },
+    "@trevoreyre/autocomplete-vue": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@trevoreyre/autocomplete-vue/-/autocomplete-vue-2.0.2.tgz",
+      "integrity": "sha512-2A/SQjtZOX1/4AAsw/EkblMKw1xH+EJj99K2tRXu8umUpBFWUFk3PXCa7NlBE3fv2YSKf7fGEn1i225xtiulUg=="
+    },
     "@types/events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
diff --git a/package.json b/package.json
index e8f0fdfe816916bcfafc914a12d917a7d2d9d8c9..e00441ce80bf3fe00303d07ed601677191bdc24f 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@trevoreyre/autocomplete-vue": "^2.0.2",
     "axios": "^0.19.0",
     "core-js": "^2.6.5",
     "jquery": "^3.4.1",
diff --git a/src/App.vue b/src/App.vue
index a17705f5dc9e57a77765512daa1b98efc29d2b82..3082f38939af2b1db5b43a0a956b06bfc121eaa6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,72 @@
 <template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
-    <Article :article_id="article_id" />
+    <div class="">
+      <autocomplete :search="search" :get-result-value="result_view" @submit="select_result" placeholder="søk..."></autocomplete>
+    </div>
+    <Article :article="article" />
   </div>
 </template>
 
 <script>
+import axios from "axios";
 import Article from './components/Article.vue'
+import Autocomplete from '@trevoreyre/autocomplete-vue'
+import '@trevoreyre/autocomplete-vue/dist/style.css'
+
+window.onpopstate = function (event) {
+  if (event.state) {
+    console.log(event)
+    app.__vue__._data.article = event.state
+  } else {
+    console.log(event)
+  }
+}
 
 export default {
   name: 'app',
   data: function() {
     return {
-      article_id: parseInt(window.location.href.split("/").pop())
+      article_id: parseInt(window.location.href.split("/").pop()),
+      article: {lemmas: []},
+      search: function(q) {
+        return new Promise(resolve => {
+          return axios.post('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_search/',
+                            {
+                                "suggest": {
+                                  "suggest" : {
+                                    "prefix" : q,
+                                    "completion" : {
+                                      "field" : "suggest"
+                                    }
+                                  }
+                                }
+                              }).then(response => resolve(response.data.suggest.suggest[0].options))
+        })
+      },
+      result_view: function(result) {
+        return result._source.lemmas.map(x => x.word).join(', ')
+      }
     }
   },
   components: {
-    Article
+    Article,
+    Autocomplete
+  },
+  methods: {
+    select_result: function(event) {
+      this.article = event._source
+      history.pushState(this.article, this.article.lemmas.map(x => x.word).join(', '), event._id)
+    }
+  },
+  mounted: function(){
+    var self = this;
+    axios.get('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_doc/' + self.article_id)
+      .then(function(response){
+        self.article = response.data._source
+        history.replaceState(self.article, self.article.lemmas.map(x => x.word).join(', '))
+      })
+
   }
 }
 </script>
@@ -30,4 +80,8 @@ export default {
   margin-top: 60px;
   margin-left: 30%;
 }
+
+.autocomplete {
+  width: 25em;
+}
 </style>
diff --git a/src/components/Article.vue b/src/components/Article.vue
index 9362ffd99d9fb1199ad254d2475f6e709bfe80cd..ec7ba45886dfaa20a45905727d238b401cf291fd 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -26,17 +26,7 @@ import Header from './Header.vue'
 export default {
   name: 'Article',
   props: {
-    article_id: Number
-  },
-  data: function(){
-    return {
-      article: {lemmas: []}
-    };
-  },
-  mounted: function(){
-    var self = this;
-    axios.get('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_doc/' + self.article_id)
-      .then(response => self.article = response.data._source)
+    article: Object
   },
   components: {
     DefElement,