Replace suggestion api

src/components/Autocomplete.vue

@@ -26,7 +26,10 @@
         :dense="$vuetify.breakpoint.smAndDown"
       >
       <template v-slot:item="data">
-      <span class="search-hit">{{data.item.label}} </span> ({{data.item.lang_set ? Array.from(data.item.lang_set).sort().join(', ') : 'fritekstsøk'}})
+      <span class="search-hit">
+        {{data.item.label}} 
+      </span> 
+      ({{data.item.lang? data.item.lang[1] ? "bm, nn" : {"bob": "bm", "nob": "nn"}[data.item.lang[0]] : 'fritekstsøk'}})
       </template>
     </v-combobox>
   </div>
@@ -49,44 +52,26 @@
         suggesting: null,
         debounced: debounce(function(q, self) {
           self.loading = true
-          return axios.get(self.endpoint + 'suggest?q=' + encodeURIComponent(q))
+          return axios.get(self.endpoint + 'suggest?', { params: {q: q,
+                                                                  dict: self.$parent.lang,
+                                                                  n: 9}} )
                       .then(
                             function(response) {
-                                if (self.suggesting) {
-                                  let hits = []
-                                  if (q == self.$refs.autocomplete.searchInput)  {
+                                  if (self.$refs.autocomplete.searchInput == q & self.suggesting) {
+
+                                    let hits = []
                                     response.data.forEach((item, i) => {
-                                      let match = encodeURIComponent(item.match)
+                                      let hit = {q: q, match: item[0], label: item[0], articles: []}
+                                      hit.lang = item[1]
+                                      hits.push(hit)
 
-                                      if (! hits[0] || hits[0].word != match) {
-                                        hits.splice(0, 0, {q: encodeURIComponent(q), lang_set: new Set(), word: match, articles: []})
-                                      }
-                                      hits[0].lang_set.add(item.dictionary == 'bob' ? 'bm' : 'nn')
-                                      hits[0].articles.push(item)
-                                    });
-                                    hits.forEach(function (hit) {
-                                      if (hit.lang_set) {
-                                        hit.label = decodeURIComponent(hit.word)
-                                      }
                                     });
-                                    hits.reverse()
-                                    hits = hits.slice(0, 9)
-
-                                    hits.sort( (h1, h2) => {
-                                    let val1 = h1.label.length * 10 + (h1.label[0].toLowerCase() === h1.label[0] ? 0 : 1)
-                                    let val2 = h2.label.length * 10 + (h2.label[0].toLowerCase() === h2.label[0] ? 0 : 1)
-                                    return val1 - val2
-                                    
-                                  })
-                                  let currentSearch = self.$refs.autocomplete.searchInput
-                                  if (q == currentSearch) {
+                                    // whitespace necessary because duplicates aren't allowed in the dropdown
+                                    hits.push({q: q, label: q + ' '}) 
                                     self.items = hits
                                   }
-                                  self.items.push({currentSearch: encodeURIComponent(currentSearch), label: currentSearch + ' '})
-                                  
-                                  }
-                                }
-                                self.loading = false
+
+                                self.loading = false                          
                               })
         }, 100)
       }
@@ -101,24 +86,59 @@
       },
       select(item) {
         if (item) {
-          if (typeof item === 'string') {
-            item = {"q": encodeURIComponent(item)}
-          }
-          this.items = []
-          this.suggesting = false
+          if (typeof item != 'string') {
+            let self = this
+            if (item.articles) {
+            axios.get(self.endpoint + 'articles?', {params: {lord: item.match,
+                                                             dict: self.$parent.lang}})
+              .then(
+                function(response) {
+                    ['bob', 'nob'].forEach((dict_tag) => {
+                      response.data[dict_tag].forEach((article_id) => {
+                        let article = {}
+                        article.article_id = article_id
+                        article.dictionary = dict_tag
+                        article.match = item.match
+                        item.articles.push(article)
+                        })
+                      })
+                    }
+                  )
+              }
+              this.items = []
+              this.suggesting = false
+
+              self.$emit('submit', item)
 
-          this.$emit('submit', item)
-          let self = this
-          setTimeout(() => self.$refs.autocomplete.$refs.input.select(), 1)
+              setTimeout(() => {
+                self.$refs.autocomplete.$refs.input.select()
+                this.items = []
+                this.suggesting = false
+                }, 1)
+            
+          }
+          // If blurred
+          else {
+            this.items = []
+          }
         }
       }
     },
     methods: {
       run_query(q) {
-        this.items = []
         this.suggesting = true
+        // Put full text search in the list while processing suggestions
+        if (this.items[0]) {
+          if (this.items[0].lang) {
+          this.items.unshift({q: q, label: q})
+        }
+          else {
+            this.items[0] = {q: q, label: q}
+          }
+        }
         this.debounced(q, this)
-      }
+      },
+
     },
   }
 </script>

src/components/DictionaryView.vue

@@ -29,7 +29,7 @@
           </v-radio>
         </v-radio-group>
       </div>
-      <Autocomplete @submit="select_result" :endpoint="api_pref">
+      <Autocomplete @submit="select_result" :endpoint="oda_endpoint">
       </Autocomplete>
     </div>
     <div id="spinner" v-if="waiting">
@@ -74,6 +74,7 @@ import SearchResults from './SearchResults.vue'
 import Autocomplete from './Autocomplete.vue'
 
 var api_endpoint = process.env.VUE_APP_API_PREFIX + '/api/dict'
+const oda_endpoint = 'https://oda.uib.no/opal-api/'
 
 function compare_by_hgno(lemma_text) {
   return function(art1, art2) {
@@ -188,6 +189,9 @@ export default {
     },
     api_pref: function() {
       return api_endpoint + '/' + this.lang + '/article/'
+    },
+    oda_endpoint: function() {
+      return oda_endpoint
     }
   },
   components: {
@@ -199,12 +203,14 @@ export default {
     select_result: function(event) {
       this.event = event
       if(event.articles){
-        let source = '/' + this.lang + '/w/' + event.word
+        let source = '/' + this.lang + '/w/' + event.match
         this.$router.push(source)
-        this.search_results = event.articles.sort(compare_by_hgno(decodeURIComponent(event.word))).map(a => Object.assign(a, {source: source}))
+        this.search_results = event.articles.map(a => Object.assign(a, {source: source}))
         this.article = null
         this.error = null
+        this.waiting_for_articles = true
         history.replaceState({article: this.article, search_results: this.search_results, lang: this.lang, error: this.error}, '')
+        navigate_to_word(this, event.match)
         this.$plausible.trackEvent('dropdown selection', {props: {query: event.label, match: event.match}})
       }else{
         this.waiting_for_articles = true