Fix for not displaying highlight labels. Also #79

README.md

@@ -1,7 +1,7 @@
 # vue-multiselect ![Build Status](https://circleci.com/gh/monterail/vue-multiselect/tree/master.svg?style=shield&circle-token=5c931ff28fd12587610f835472becdd514d09cef)
 Probably the most complete *selecting* solution for Vue.js, without jQuery.
 
-#### Current version: v1.1.0
+#### Current version: v1.1.2
 
 ### Features & characteristics:
 * NO dependencies

docs/partials/_start.jade

@@ -5,7 +5,7 @@ section.start(
     h1.typo__h1
       img.logo(src="./static/vue-logo.png")
       | Vue-multiselect
-      small.version (v1.1.0)
+      small.version (v1.1.2)
     h3.typo__h3 The most complete selecting solution for
       = ' '
       a.typo__link(href="http://vuejs.org" target="_BLANK") Vue.js

docs/partials/api/_props.jade

@@ -59,6 +59,12 @@ h2.typo__h2#props Props
           td.table__td: kbd true
           td.table__td
             | Add / removes search input.
+        tr.table__tr
+          td.table__td: strong LocalSearch
+          td.table__td Boolean
+          td.table__td: kbd true
+          td.table__td
+            | Decide whether to filter the results based on search query. Useful for async filtering, where we search through more complex data.
         tr.table__tr
           td.table__td: strong ClearOnSelect
           td.table__td Boolean

docs/partials/examples/_ajax-search.jade

@@ -11,7 +11,7 @@ p.typo__p
       :options="countries",
       :selected="selectedCountries",
       :multiple="multiple",
-      :searchable="searchable",
+      :local-search="false",
       :clear-on-select="false",
       :close-on-select="false",
       :loading="isLoading",
@@ -36,7 +36,7 @@ p.typo__p
           :options="countries",
           :selected="selectedCountries",
           :multiple="multiple",
-          :searchable="searchable",
+          :local-search="false",
           :clear-on-select="false",
           :close-on-select="false",
           :loading="isLoading",

lib/Multiselect.vue

@@ -71,9 +71,12 @@
             track-by="$index"
             tabindex="0"
             :class="{ 'multiselect__option--highlight': $index === pointer && this.showPointer, 'multiselect__option--selected': !isNotSelected(option) }"
+            class="multiselect__option"
             @mousedown.prevent="select(option)"
             @mouseenter="pointerSet($index)"
-            class="multiselect__option">
+            :data-select="option.isTag ? tagPlaceholder : selectLabel"
+            :data-selected="selectedLabel"
+            :data-deselect="deselectLabel">
             <partial :name="optionPartial" v-if="optionPartial.length"></partial>
             <span v-else v-text="getOptionLabel(option)"></span>
           </li>

lib/multiselectMixin.js

@@ -9,6 +9,15 @@ module.exports = {
     }
   },
   props: {
+    /**
+     * Decide whether to filter the results based on search query.
+     * Useful for async filtering, where we search through more complex data.
+     * @type {Boolean}
+     */
+    localSearch: {
+      type: Boolean,
+      default: true
+    },
     /**
      * Array of available options: Objects, Strings or Integers.
      * If array of objects, visible label will default to option.label.
@@ -180,7 +189,7 @@ module.exports = {
       let options = this.hideSelected
         ? this.options.filter(this.isNotSelected)
         : this.options
-      options = this.$options.filters.filterBy(options, this.search)
+      if (this.localSearch) options = this.$options.filters.filterBy(options, this.search)
       if (this.taggable && search.length && !this.isExistingOption(search)) {
         options.unshift({ isTag: true, label: search })
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-multiselect",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Multiselect component for vue.js",
   "author": "Damian Dulisz <[email protected]>",
   "private": false,

src/Multiselect.vue

@@ -71,9 +71,12 @@
             track-by="$index"
             tabindex="0"
             :class="{ 'multiselect__option--highlight': $index === pointer && this.showPointer, 'multiselect__option--selected': !isNotSelected(option) }"
+            class="multiselect__option"
             @mousedown.prevent="select(option)"
             @mouseenter="pointerSet($index)"
-            class="multiselect__option">
+            :data-select="option.isTag ? tagPlaceholder : selectLabel"
+            :data-selected="selectedLabel"
+            :data-deselect="deselectLabel">
             <partial :name="optionPartial" v-if="optionPartial.length"></partial>
             <span v-else v-text="getOptionLabel(option)"></span>
           </li>

src/multiselectMixin.js

@@ -9,6 +9,15 @@ module.exports = {
     }
   },
   props: {
+    /**
+     * Decide whether to filter the results based on search query.
+     * Useful for async filtering, where we search through more complex data.
+     * @type {Boolean}
+     */
+    localSearch: {
+      type: Boolean,
+      default: true
+    },
     /**
      * Array of available options: Objects, Strings or Integers.
      * If array of objects, visible label will default to option.label.
@@ -180,7 +189,7 @@ module.exports = {
       let options = this.hideSelected
         ? this.options.filter(this.isNotSelected)
         : this.options
-      options = this.$options.filters.filterBy(options, this.search)
+      if (this.localSearch) options = this.$options.filters.filterBy(options, this.search)
       if (this.taggable && search.length && !this.isExistingOption(search)) {
         options.unshift({ isTag: true, label: search })
       }

test/unit/specs/Multiselect.spec.js

@@ -1212,6 +1212,22 @@ describe('Multiselect.vue', () => {
       expect(vm.$children[0].filteredOptions).to.deep.equal([{ isTag: true, label: '1' }, 10])
       expect(vm.$children[0].filteredOptions.length).to.equal(2)
     })
+
+    it('should not alter the available options when :local-search is FALSE', () => {
+      const vm = new Vue({
+        template: '<multiselect :selected="value" :options="source" :multiple="true" :local-search="false"></multiselect>',
+        components: { Multiselect },
+        data: {
+          value: [],
+          source: [10, 20, 30]
+        }
+      }).$mount()
+      expect(vm.$children[0].filteredOptions).to.deep.equal([10, 20, 30])
+      expect(vm.$children[0].filteredOptions.length).to.equal(3)
+      vm.$children[0].search = 'test'
+      expect(vm.$children[0].filteredOptions).to.deep.equal([10, 20, 30])
+      expect(vm.$children[0].filteredOptions.length).to.equal(3)
+    })
   })
 
   describe('#onTag', () => {