materio-d8/web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

<script>

import Vue from 'vue'

import router from 'vuejs/route'

import { mapState } from 'vuex'

export default {
  router,
  props: ['form'],
  data() {
    return {
      template: null,
      typed: null,
      autocomplete: null,
      $input: null
      // basePath: drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix
    }
  },
  computed: {
    ...mapState({
      keys: state => state.Search.keys,
      term: state => state.Search.term
    })
  },
  methods: {
    submit() {
      console.log("search submited", this.typed, this.autocomplete)
      // unfocus the text input to hide the keyboard on mobile device
      this.$input.blur()
      // New search is triggered by Base.vue with router (which will also fill the store)
      this.$router.push({name:'base', query:{keys:this.typed,term:this.autocomplete}})
      // this.$router.push({
      //   path:`${this.basePath}/base`,
      //   query:{keys:this.typed,term:this.autocomplete}
      // })
    },
    onAutoCompleteSelect(event, ui){
      event.preventDefault();
      console.log('autoCompleteSelect', event, ui)
      this.typed = ui.item.label
      // we have to wait for typed watch to reset autocomplete before setting it
      setTimeout(function(){
        console.log('update autocomplete value after settimeout')
        this.autocomplete = ui.item.value
        if (this.typed !== this.keys || this.autocomplete !== this.term) {
          this.submit()
        }
      }.bind(this), 1)

    }
  },
  directives: {
    focus: {
      // directive definition
      inserted: function (el) {
        // do not focus the input as it popup the keyboard on mobile device
        // el.focus()
      }
    }
  },
  beforeMount() {
    // console.log('SearchForm beforeMount')
    if (this._props.form) {
      // console.log('SearchForm beforeMount if this._props.form ok')
      this.template = Vue.compile(this._props.form)
      // https://github.com/vuejs/vue/issues/9911
      this.$options.staticRenderFns = [];
      this._staticTrees = [];
      this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
    }
  },
  watch: {
    typed(n, o){
      console.log('typed changed', o, n)
      // is changed also when autocomplete change it ...
      this.autocomplete = null
    },
    keys(n, o){
      console.log('keys changed', o, n)
      this.typed = n
    },
    term(n, o){
      console.log('autocomplete changed', o, n)
      this.autocomplete = n
    }
  },
  created() {
    this.typed = this.keys
    this.autocomplete = this.term
  },
  mounted(){
    // console.log('SearchForm mounted')
    Drupal.attachBehaviors(this.$el);
    // get the search input
    this.$input = this.$el.querySelector('#edit-search')
    // // focus on input
    // $input.focus()
    // Catch the jquery ui events for autocmplete widget
    jQuery(this.$input).on('autocompleteselect', this.onAutoCompleteSelect);
  },
  render(h) {
    // console.log('searchForm render')
    if (!this.template) {
      return h('span', 'Loading ...')
    } else {
      return this.template.render.call(this)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>