Merge pull request #3 from DeVoresyah/master

Add: scroll function, max items to show, input name props

README.md

@@ -38,6 +38,8 @@ Once installed, it can be used in a template as simply as:
     v-on:selected="validateSelection"
     v-on:filter="getDropdownValues"
     :disabled="false"
+    name="zipcode"
+    :maxItem="10"
     placeholder="Please select an option">
 </Dropdown>
 ```
@@ -47,11 +49,13 @@ Once installed, it can be used in a template as simply as:
 - `options` (required): An array of options with `id` and `name`
 - `placeholder` (optional): A placeholder 
 - `disabled` (optional): true/false
+- `name` (optional): An input name | default: `dropdown`
+- `maxItem` (optional): Max item to show | default: `10`
 
 ### Events
 
 These events are returned from the dropdown and can be catch with `v-on`
 - `selected`: An option is selected by click in the dropdown
 - `filter`: A filter has been applied by typing in the input field
 
-Tips: Using `v-on:filter`, you can repopulate the dropdown with new `options` corresponding to the search by making an API call
+Tips: Using `v-on:filter`, you can repopulate the dropdown with new `options` corresponding to the search by making an API call

src/Dropdown.vue

@@ -3,6 +3,7 @@
 
     <!-- Dropdown Input -->
     <input class="dropdown-input"
+      :name="name"
       @focus="showOptions()"
       @blur="exit()"
       @keyup="keyMonitor"
@@ -16,7 +17,8 @@
       <div
         class="dropdown-item"
         @mousedown="selectOption(option)"
-        v-for="option of filteredOptions">
+        v-for="(option, index) in filteredOptions"
+        :key="index">
           {{ option.name || option.id || '-' }}
       </div>
     </div>
@@ -28,6 +30,12 @@
     name: 'Dropdown',
     template: 'Dropdown',
     props: {
+      name: {
+        type: String,
+        required: false,
+        default: 'dropdown',
+        note: 'Input name'
+      },
       options: {
         type: Array,
         required: true,
@@ -45,6 +53,12 @@
         required: false,
         default: false,
         note: 'Disable the dropdown'
+      },
+      maxItem: {
+        type: Number,
+        required: false,
+        default: 10,
+        note: 'Max items showing'
       }
     },
     data() {
@@ -63,7 +77,7 @@
         const regOption = new RegExp(this.searchFilter, 'ig');
         for (const option of this.options) {
           if (this.searchFilter.length < 1 || option.name.match(regOption)){
-            if (filtered.length < 6) filtered.push(option);
+            if (filtered.length < this.maxItem) filtered.push(option);
           }
         }
         return filtered;
@@ -137,8 +151,10 @@
       background-color: #fff;
       min-width: 248px;
       max-width: 248px;
+      max-height: 248px;
       border: 1px solid #e7ecf5;
       box-shadow: 0px -8px 34px 0px rgba(0,0,0,0.05);
+      overflow: auto;
       z-index: 1;
       .dropdown-item {
         color: black;