started advanced search UI

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

@@ -6,6 +6,8 @@ import router from 'vuejs/route'
 
 import { mapState } from 'vuex'
 
+import SlimSelect from 'slim-select'
+
 export default {
   router,
   props: ['form'],
@@ -99,6 +101,30 @@ export default {
     // $input.focus()
     // Catch the jquery ui events for autocmplete widget
     jQuery(this.$input).on('autocompleteselect', this.onAutoCompleteSelect);
+    // customize the select filters
+    // http://slimselectjs.com/options
+    const selects = this.$el.querySelectorAll('select')
+    selects.forEach((selectElement) => {
+      const placeholder_option = selectElement.querySelector('option:first-child')
+      console.log('placeholder_option', placeholder_option);
+      const placeholder = placeholder_option.innerText
+      placeholder_option.removeAttribute("value")
+      // let attr = document.createAttribute('data-placeholder')
+      // attr.value = true
+      placeholder_option.setAttribute("data-placeholder", true)
+      placeholder_option.innerHTML = ''
+      new SlimSelect({
+        select: selectElement,
+        placeholder: placeholder,
+        // allowDeselect: true
+        allowDeselectOption: true,
+        showSearch: false,
+        closeOnSelect: false,
+        onChange: (info) => {
+          console.log(info)
+        }
+      })
+    })
   },
   render(h) {
     // console.log('searchForm render')