drafted ajax search call

web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue

@@ -33,7 +33,7 @@ export default {
     }
   },
   beforeMount() {
-    console.log('LoginBlock beforeMount', this._props.block);
+    // console.log('LoginBlock beforeMount', this._props.block);
     if(this._props.block){
       // console.log('LoginBlock beforeMount if this._props.block ok');
       this.template = Vue.compile(this._props.block)

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -2,20 +2,54 @@
 
 import Vue from 'vue'
 
+import { mapState, mapActions } from 'vuex'
+
 export default {
   props: ['form'],
   data() {
     return {
-      template: null,
-      typed: ""
+      template: null
+      // keys: "",
+      // autocomplete: ""
     }
   },
-  methods: {
-    keyup() {
-      console.log("search typed", this.typed);
+  computed: {
+    // ...mapState(['Search'])
+    // ...mapState({
+    //   // keys: state => state.Search.keys,
+    //   autocomplete: state => state.Search.autocomplete
+    // }),
+    keys: {
+      get(){
+        return this.$store.state.Search.keys
+      },
+      set(value){
+        this.$store.commit('Search/setKeys', value)
+      }
     },
+    autocomplete: {
+      get(){
+        return this.$store.state.Search.autocomplete
+      },
+      set(value){
+        this.$store.commit('Search/setAutocomplete', value)
+      }
+    }
+
+  },
+  methods: {
+    ...mapActions({
+      getResults: 'Search/getResults'
+    }),
     submit() {
-      console.log("search clicked");
+      console.log("search clicked", this.keys, this.autocomplete);
+      this.getResults();
+    },
+    onAutoCompleteSelect(event, ui){
+      event.preventDefault();
+      // console.log('autoCompleteSelect', event, ui);
+      this.keys = ui.item.label
+      this.autocomplete = ui.item.value
     }
   },
   beforeMount() {
@@ -29,9 +63,16 @@ export default {
       this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
     }
   },
+  watch: {
+    keys(){
+      console.log('keys changed', this.keys);
+    }
+  },
   mounted(){
     // console.log('SearchForm mounted');
     Drupal.attachBehaviors(this.$el);
+    // Catch the jquery ui events for autocmplete widget
+    jQuery(this.$el.querySelector('#edit-search')).on('autocompleteselect', this.onAutoCompleteSelect);
   },
   render(h) {
     // console.log('searchForm render');

web/themes/custom/materiotheme/vuejs/store/index.js

@@ -1,12 +1,14 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import User from './modules/user'
+import Search from './modules/search'
 
 // https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
 
 Vue.use(Vuex)
 export default new Vuex.Store({
   modules: {
-    User
+    User,
+    Search
   }
 })

web/themes/custom/materiotheme/vuejs/store/modules/search.js

@@ -0,0 +1,53 @@
+import { JSONAPI } from 'vuejs/api/json-axios'
+import { MA } from 'vuejs/api/ma-axios'
+import qs from 'querystring'
+
+export default {
+  namespaced: true,
+
+  // initial state
+  state : {
+    keys: "",
+    autocomplete: "",
+    results: {}
+  },
+
+  // getters
+  getters : {},
+
+  // mutations
+  mutations : {
+    setResults (state, data) {
+      state.results = data.results
+    },
+    setKeys (state, keys) {
+      state.keys = keys
+    },
+    setAutocomplete (state, autocomplete) {
+      state.autocomplete = autocomplete
+    }
+  },
+
+  // actions
+  actions : {
+    getResults ({ dispatch, commit, state }) {
+      let params = {
+        keys: state.keys,
+        autocomplete: state.autocomplete,
+        offset:0,
+        limit: 25
+      }
+      console.log('Search getResults params', params);
+      let q = qs.stringify(params)
+      return MA.get(`/materio_sapi/getresults?`+q)
+        .then(({ data }) => {
+          console.log('search MA getresults data', data)
+          commit('setResults', data)
+        })
+        .catch(( error ) => {
+            console.warn('Issue with getResults', error)
+            Promise.reject(error)
+        })
+    }
+  }
+}