Autocomplete.vue

<template>
  <div class="autocomplete-container" :class="$vuetify.breakpoint.name">
    <v-combobox accesskey="s" aria-label="søkefelt"
        v-model="select"
        :loading="loading"
        :items="items"
        :search-input.sync="search"
        item-text="label"
        :menu-props="{maxHeight: $vuetify.breakpoint.name === 'xs' ? 190 : 500, transition: 'fade-transition', allowOverflow: true}"
        prepend-inner-icon="search"
        return-object
        rounded
        clearable
        hide-no-data
        autofocus
        auto-select-first
        no-filter
        hide-details
        label="Søk..."
        solo
        full-width
        flat
        outlined
        placeholder="Søk her"
        ref="autocomplete"
        color="primary"
        :dense="$vuetify.breakpoint.smAndDown"
      >
      <template v-slot:append>
        <v-divider vertical  v-if="!$parent.settings.show_radio_buttons"/>
        <v-menu allowOverflow: true v-if="!$parent.settings.show_radio_buttons">
        <template v-slot:activator="{ on, attrs }">
        <v-btn min-width="0px" v-bind="attrs" v-on="on" plain depressed color = "primary" text><span v-if="$vuetify.breakpoint.mdAndUp">{{{"bm,nn":"begge ordbøkene", "bm": "bokmålsordboka (bm)", "nn":"nynorskordboka (nn)"}[$parent.lang]}}</span><v-icon>expand_more</v-icon></v-btn>
                </template>
        <v-list>
          <v-list-item  v-for="item in [{label:'begge ordbøkene', tag:'bm,nn'},{label:'bokmålsordboka (bm)', tag:'bm'},{label:'nynorskordboka (nn)', tag:'nn'}]" :key="item.tag"
          active-class="v-list-item--active" :class="$parent.lang == item.tag ? 'v-list-item--active' : ''" @click="$parent.update_lang_form(item.tag)">
                <v-list-item-title >{{ item.label }}</v-list-item-title>
          </v-list-item>

        </v-list>
        </v-menu>
                <v-divider vertical  v-if="$parent.settings.show_pos_select"/>
        <v-menu allowOverflow: true  v-if="$parent.settings.show_pos_select">
        <template v-slot:activator="{ on, attrs }">
        <v-btn min-width="0px" plain depressed v-bind="attrs" v-on="on" color = "primary" text><span v-if="$vuetify.breakpoint.mdAndUp">{{$parent.pos_selected.label}}</span><v-icon>expand_more</v-icon></v-btn>
        </template>
        <v-list>
          <v-list-item active-class="v-list-item--active" :class="$parent.pos_selected.tag == item.tag ? 'v-list-item--active' : ''" v-for="item in $parent.pos" :key="item.tag" @click="$parent.update_pos(item)">
            <v-list-item-title >{{ item.label }}</v-list-item-title>
          </v-list-item>
        </v-list>
        </v-menu><v-divider vertical/>
        <v-dialog max-width="800px" v-model="settings_dialog" hide-overlay fullscreen
        :close-on-content-click="false" origin="bottom" >
          <template v-slot:activator="{ on, attrs }">
            <v-btn v-bind="attrs" v-on="on" min-width="0px" class = "search-field-button" plain depressed color = "primary" text><span v-if="$vuetify.breakpoint.mdAndUp"></span><v-icon>more_vert</v-icon></v-btn>
          </template>
          <Menu/>

          
        </v-dialog>
      </template>
     
      <template v-slot:item="data">
      <span class="search-hit">
        {{data.item.label}}
      </span>
        <span v-if="(get_lang()=='bm,nn')">
            ({{["bm","nn","bm,nn"][data.item.lang-1] || 
            ["søker...","ingen treff","avansert søk"][data.item.search]}})
        </span>
      </template>
      <template slot="no-data">
        <div></div>
      </template>
    </v-combobox>
  </div>
</template>

<script>
import Menu from './Menu.vue'

  export default {
    props: {
      api: Function,
    },
    data: function() {
      return {
        loading: false,
        items: [],
        search: null,
        select: null,
        suggesting: null,
        settings_dialog: false
      }
    },
    watch: {
      search (val) {
        const time = Date.now()
        if (! val) {
          this.items = []
        } else {
          this.run_query(val, time)
        }
      },
      select(item) {
        if (item) {
          this.items = []
          if (typeof item != 'string') {
            this.suggesting = false
            
            this.submit(item)
          }
        }
      }
    },
    components: {
      Menu
    },
    methods: {
      get_lang() {
        return this.$parent.lang
      },
      run_query(q, time) {
        this.suggesting = true
        // Search options while waiting for response
        var search = 0
        if (this.items[0]) {
          if (this.items[0].time < time) {
            if (/[_*%|]/.test(q)) {
              search = 2
            }
            // Whitespace necessary in case option already exists in dropdown
            this.items.splice(0,1, {q: q, label: q +" ", time: time, search: search})
          }
        }
        else {
          this.items.push({q: q, label: q, time: time, search: search})
        }
        let self = this
        self.api.get('suggest?', {params: {q: q, dict: self.get_lang(), n: 80, scope: 'w', dform: 'int', meta: 'n', wc: self.$parent.pos_selected.tag}})
            .then(async (response) => {
                        if (self.$refs.autocomplete.searchInput == q & self.suggesting) {
                          let suggestions = response.data.a.w.map(item => ({q: q, match: item[0], label: item[0], time: time, lang: [item[1]]}))
                          if (/[_*%|]/.test(q)) {
                            suggestions.unshift({q: q, label: q, time: time, search: 2})
                          }
                          
                          if (!suggestions.length) {
                            self.items = [{q: q, label: q, time: time, search: 1}]
                          } else {
                            self.items = suggestions
                          }
                        }
                      self.loading = false
                    })

      },
      submit(item) {

          this.$emit('submit', item)
          let self = this

          setTimeout(() => {
          self.$refs.autocomplete.$refs.input.select()
          this.items = []
          this.suggesting = false
          }, 1)

      }
    },
  }
</script>


<style scoped>
  .search-hit {
    font-weight: bold;
    margin-right: 5px;
    color: var(--v-primary-base);
  }

  .autocomplete-container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .search-field-button {
    padding: 0px !important;

  }
</style>