Further improvements

* Renamed CSS classes 'dropdown' => 'multiselect`
* Add support for async options with callback on search
* Added `closeOnSelect` and `resetAfter` props
* `resetAfter` requires further tests

Author: Damian Dulisz

package.json

@@ -8,6 +8,7 @@
     "dev": "node build/dev-server.js",
     "build": "node build/build.js",
     "unit": "karma start test/unit/karma.conf.js --single-run",
+    "unit-watch": "karma start test/unit/karma.conf.js --watch",
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit && npm run e2e",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"

src/App.vue

@@ -1,13 +1,30 @@
 <template>
   <div id="app">
     <h1><img class="logo" src="./assets/logo.png"> Vue-multiselect</h1>
-    <multiselect
+    <!-- <multiselect
       :options="options"
       :selected="selected"
       :multiple="multiple"
       :searchable="searchable"
       :placeholder="placeholder"
     >
+      <span slot="noResult">
+        Oops! No elements found. Consider changing the search query.
+      </span>
+    </multiselect> -->
+
+    <multiselect
+      :options="countries"
+      :selected="selectedCountries"
+      :multiple="multiple"
+      :searchable="searchable"
+      :placeholder="placeholder"
+      :on-search-change="asyncFind"
+      label="name"
+    >
+      <span slot="noResult">
+        Oops! No elements found. Consider changing the search query.
+      </span>
     </multiselect>
 
     <h2>Config</h2>
@@ -27,6 +44,7 @@
       :searchable="true"
       :placeholder="placeholder"
       label="name"
+      :close-on-select="false"
     >
     </multiselect>
 
@@ -35,6 +53,7 @@
 
 <script>
 import Multiselect from './components/Multiselect'
+import countries from './data/countries.json'
 
 export default {
   components: {
@@ -48,7 +67,18 @@ export default {
       searchable: true,
       placeholder: 'Select props',
       source: [{ name: '1' }, { name: '2' }, { name: '3' }],
-      value: []
+      value: [],
+      countries: [],
+      selectedCountries: []
+    }
+  },
+  methods: {
+    asyncFind (query) {
+      setTimeout(() => {
+        this.countries = countries.filter((element, index, array) => {
+          return element.name.toLowerCase().includes(query.toLowerCase())
+        })
+      }, 1500)
     }
   }
 }
@@ -70,7 +100,7 @@ body {
 
 #app {
   margin-top: -100px;
-  width: 500px;
+  width: 450px;
   max-width: 500px;
   font-family: 'Lato', Helvetica, sans-serif;
   text-align: center;

src/assets/_functions.sass

@@ -19,3 +19,35 @@
     $rem-list: append($rem-list, to-rem(nth($values, $i)))
 
   @return $rem-list
+
+@mixin spinner($size: 16px, $color: #333, $border-width: 2px)
+  width: rem($size)
+
+  &:before,
+  &:after
+    position: absolute
+    content: ''
+    top: 50%
+    left: 50%
+    margin: rem($size / -2 0 0 $size / -2)
+    width: rem($size)
+    height: rem($size)
+    border-radius: 100%
+    border-color: $color transparent transparent
+    border-style: solid
+    border-width: $border-width
+    box-shadow: 0 0 0 1px transparent
+
+  &:before
+    animation: spinning 1.8s cubic-bezier(0.41, 0.26, 0.2, 0.62)
+    animation-iteration-count: infinite
+
+  &:after
+    animation: spinning 1.8s cubic-bezier(0.51, 0.09, 0.21, 0.8)
+    animation-iteration-count: infinite
+
+@keyframes spinning
+  0%
+    transform: rotate3d(0, 0, 1, 0)
+  100%
+    transform: rotate3d(0, 0, 1, 720deg)