Merge pull request shentao#108 from boardbang/2.0

Damian Dulisz · web-flow · commit 92b50003bd00 · 2016-09-18T19:33:01.000+02:00
localSearch on 2.0
diff --git a/lib/multiselectMixin.js b/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.
@@ -176,9 +185,11 @@ module.exports = {
       let options = this.hideSelected
         ? this.options.filter(this.isNotSelected)
         : this.options
-      options = this.label
-        ? options.filter((option) => option[this.label].includes(this.search))
-        : options.filter((option) => option.includes(this.search))
+      if (this.localSearch) {
+        options = this.label
+          ? options.filter((option) => option[this.label].includes(this.search))
+          : options.filter((option) => option.includes(this.search))
+      }
       if (this.taggable && search.length && !this.isExistingOption(search)) {
         options.unshift({ isTag: true, label: search })
       }
diff --git a/package.json b/package.json
@@ -84,6 +84,7 @@
     "nightwatch": "^0.8.18",
     "node-sass": "^3.4.2",
     "ora": "^0.2.0",
+    "phantomjs-polyfill-includes": "0.0.1",
     "phantomjs-prebuilt": "^2.1.3",
     "sass-loader": "^3.2.0",
     "selenium-server": "^2.53.0",
diff --git a/src/multiselectMixin.js b/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.
@@ -176,9 +185,11 @@ module.exports = {
       let options = this.hideSelected
         ? this.options.filter(this.isNotSelected)
         : this.options
-      options = this.label
-        ? options.filter((option) => option[this.label].includes(this.search))
-        : options.filter((option) => option.includes(this.search))
+      if (this.localSearch) {
+        options = this.label
+          ? options.filter((option) => option[this.label].includes(this.search))
+          : options.filter((option) => option.includes(this.search))
+      }
       if (this.taggable && search.length && !this.isExistingOption(search)) {
         options.unshift({ isTag: true, label: search })
       }
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
@@ -51,7 +51,10 @@ module.exports = function (config) {
     browsers: ['PhantomJS'],
     frameworks: ['mocha', 'sinon-chai'],
     reporters: ['spec', 'coverage'],
-    files: ['./index.js'],
+    files: [
+      '../../node_modules/phantomjs-polyfill-includes/includes-polyfill.js',
+      './index.js'
+    ],
     preprocessors: {
       './index.js': ['webpack', 'sourcemap']
     },
diff --git a/test/unit/specs/Multiselect.spec.js b/test/unit/specs/Multiselect.spec.js
@@ -1903,6 +1903,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', () => {
