preview i søkeforslag

src/App.vue

@@ -2,7 +2,12 @@
   <main id="app">
     <img alt="Vue logo" src="./assets/logo.png">
     <header>
-      <autocomplete :debounceTime="150" :auto-select="true" :search="search" :get-result-value="result_view" @submit="select_result" placeholder="søk..." ref="search"></autocomplete>
+      <autocomplete :debounceTime="100" :auto-select="true" :search="search"  @submit="select_result" placeholder="søk..." ref="search">
+        <template #result="{result, props}">
+          <Preview v-bind="props" :searchHit="result">
+          </Preview>
+        </template>
+      </autocomplete>
       <input type="radio" id="radio_nob" value="nob" v-model="lang">
       <label for="radio_nob">Bokmål</label>
       <input type="radio" id="radio_nno" value="nno" v-model="lang">
@@ -17,6 +22,7 @@
 <script>
 import axios from "axios"
 import Article from './components/Article.vue'
+import Preview from './components/Preview.vue'
 import SearchResults from './components/SearchResults.vue'
 import Autocomplete from '@trevoreyre/autocomplete-vue'
 import '@trevoreyre/autocomplete-vue/dist/style.css'
@@ -38,13 +44,7 @@ export default {
       search_results: [],
       lang: 'nob',
       waiting: true,
-      article: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}},
-      result_view: function(result) {
-        if (result._source)
-          return result._source.lemmas.map(x => x.lemma).join(', ')
-        else
-          return 'Alle søkeresultater...'
-      }
+      article: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}
     }
   },
   computed: {
@@ -74,7 +74,8 @@ export default {
   components: {
     Article,
     Autocomplete,
-    SearchResults
+    SearchResults,
+    Preview
   },
   methods: {
     select_result: function(event) {

src/components/Preview.vue

+<template>
+  <li>
+    <div class="preview">
+      <h4>{{searchHit.text || "Alle søkeresultater..."}}</h4>
+      <h5 v-if="searchHit._source">{{group_list}}</h5>
+      {{previewText.substring(0, 40) + (previewText ? '...' : '')}}
+    </div>
+  </li>
+</template>
+
+<script>
+import entities from '../utils/entities.js'
+import languages from '../utils/languages.js'
+import helpers from '../utils/helpers.js'
+
+export default {
+  name: 'Preview',
+  props: {
+    searchHit: Object
+  },
+  computed: {
+    previewText: function(){
+      if (! this.searchHit._source) return ''
+      let element = this.searchHit._source.body.definitions[0]
+      while (element.type_ == 'definition') element = element.elements[0]
+      if (element.type_ == 'example') {
+        element = element.quote
+      } else if (! element.content){
+        element = {content: '', items: []}
+      }
+
+      let replacements = element.items.map(item => item.text ||
+                                           item.string ||
+                                           entities[item.id] ||
+                                           languages[item.id] ||
+                                           item.id ||
+                                           (item.lemmas || []).join(',')).reverse()
+
+      let replacement = () => replacements.pop()
+
+      return element.content.replace(/\$/gi, replacement)
+    },
+    group_list: function() {
+      return helpers.group_list(this.searchHit._source.lemmas)
+    }
+  },
+  components: {
+
+  }
+}
+
+</script>
+<style scoped>
+h4, h5 {
+    padding: 0px;
+    margin: 0px;
+}
+</style>