Fix shentao#94. Introduce optionsLimit

Damian Dulisz · Damian Dulisz · commit a932fb291cf3 · 2016-09-14T23:06:41.000+02:00
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ Probably the most complete *selecting* solution for Vue.js, without jQuery.
 #### Current version: v1.1.2
 
 #### For Vue 2.0 users:
-Vue-multiselect 2.0-beta is available: `npm install vue-multiselect@next`. 
+Vue-multiselect 2.0-beta is available: `npm install vue-multiselect@next`.
 API changes:
 * Instead of Vue.partial for custom option templates you can use a custom render function.
 * The `:key` props has changed to `:track-by`, due to conflicts with Vue 2.0.
@@ -393,6 +393,16 @@ props: {
   */
   id: {
     default: null
+  },
+  /**
+   * Limits the options displayed in the dropdown
+   * to the first X options.
+   * @default 1000
+   * @type {Integer}
+  */
+  optionsLimit: {
+    type: Number,
+    default: 1000
   }
 }
 
diff --git a/docs/partials/api/_props.jade b/docs/partials/api/_props.jade
@@ -137,6 +137,15 @@ h2.typo__h2#props Props
           td.table__td
           td.table__td
             | Number of allowed selected options.
+        tr.table__tr
+          td.table__td
+            strong OptionsLimit
+            br
+            kbd v1.2+
+          td.table__td Number
+          td.table__td: kbd 1000
+          td.table__td
+            | Limit the elements in the dropdown to the first X options that match the search query. Useful for optimization.
 
         tr.table__tr
           td.table__td.utils--center(colspan="4"): strong Multiselect.vue
diff --git a/package.json b/package.json
@@ -88,7 +88,7 @@
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.7",
-    "vue": "^1.0.21",
+    "vue": "^1.0.26",
     "vue-hot-reload-api": "^1.2.0",
     "vue-html-loader": "^1.0.0",
     "vue-loader": "^8.2.1",
diff --git a/src/multiselectMixin.js b/src/multiselectMixin.js
@@ -178,6 +178,16 @@ module.exports = {
     */
     id: {
       default: null
+    },
+    /**
+     * Limits the options displayed in the dropdown
+     * to the first X options.
+     * @default 1000
+     * @type {Integer}
+    */
+    optionsLimit: {
+      type: Number,
+      default: 1000
     }
   },
   created () {
@@ -193,7 +203,7 @@ module.exports = {
       if (this.taggable && search.length && !this.isExistingOption(search)) {
         options.unshift({ isTag: true, label: search })
       }
-      return options
+      return options.slice(0, this.optionsLimit)
     },
     valueKeys () {
       if (this.key) {
diff --git a/test/unit/specs/Multiselect.spec.js b/test/unit/specs/Multiselect.spec.js
@@ -1228,6 +1228,22 @@ describe('Multiselect.vue', () => {
       expect(vm.$children[0].filteredOptions).to.deep.equal([10, 20, 30])
       expect(vm.$children[0].filteredOptions.length).to.equal(3)
     })
+
+    it('should return only as many options as set in the :options-limit prop.', () => {
+      const vm = new Vue({
+        template: '<multiselect :selected="value" :options="source" :multiple="true" :options-limit="2"></multiselect>',
+        components: { Multiselect },
+        data: {
+          value: [],
+          source: ['test', 'production', 'testing']
+        }
+      }).$mount()
+      expect(vm.$children[0].filteredOptions).to.deep.equal(['test', 'production'])
+      expect(vm.$children[0].filteredOptions.length).to.equal(2)
+      vm.$children[0].search = 'test'
+      expect(vm.$children[0].filteredOptions).to.deep.equal(['test', 'testing'])
+      expect(vm.$children[0].filteredOptions.length).to.equal(2)
+    })
   })
 
   describe('#onTag', () => {
