add ability to set limit to dropdown visible options (#18)

* adds limit prop and control in Vselectize

* adds documentation

* updates change.log

* Update CHANGELOG.md

Author: iamzjohn

CHANGELOG.md

@@ -5,6 +5,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [unreleased]
+### Added
+- add ability to limit dropdown options using `limit` property [#14](https://github.com/isneezy/vue-selectize/issues/9)
+### Fixed
+- long phrases were get truncated or hidden behind
 
 ## [0.3.0] - 2018-07-26
 ### Added

docs/.vuepress/components/LimitDropdownOptions.vue

@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <div>10 Countries:</div>
+        <v-selectize :options="options" v-model="selected" :limit="limit" key-by="id" label="name" :keys="['name', 'id']"/>
+        <div>Current Value: {{ selected }}</div>
+    </div>
+</template>
+
+<script>
+import VSelectize from '@isneezy/vue-selectize'
+import countries from './countries'
+export default {
+  name: 'limit-dropdown-options',
+  data: () => ({
+    options: countries,
+    selected: null,
+    limit: 10
+  }),
+  components: {VSelectize}
+}
+</script>

docs/guide/examples/README.md

@@ -33,6 +33,12 @@ A good example of:
 
 <<< @/docs/.vuepress/components/CountrySelector.vue
 
+## Limit Dropdown option
+<limit-dropdown-options/>
+This demo limits the dropdown to have only 10 contries listed.
+
+<<< @/docs/.vuepress/components/LimitDropdownOptions.vue
+
 ## Remote Source — Github
 <remote-git-hub/>
 This example shows how to integrate third-party data from the GitHub API.

src/components/VSelectize.vue

@@ -81,6 +81,11 @@ export default {
      */
     value: {default: null, type: [Array, Object, String, Number]},
 
+    /**
+     * The limit/max of options to show in dropdown
+     */
+    limit: {default: 0, type: [Number]},
+
     /**
      * Allows input to be disabled and hides dropdown options
      */
@@ -163,7 +168,8 @@ export default {
         minMatchCharLength: 1,
         keys: this.keys
       })
-      return this.searchText.length && !this.disableSearch ? fuse.search(this.searchText) : this.formattedOptions
+      const options =  this.searchText.length && !this.disableSearch ? fuse.search(this.searchText) : this.formattedOptions
+      return this.limit > 0 ? options.slice(0, this.limit) : options
     },
 
     /**