autocomplete

Author: NiltonMorais

package.json

@@ -19,6 +19,7 @@
     "laravel-elixir-browsersync-official": "^1.0.0",
     "laravel-elixir-vue": "^0.1.4",
     "laravel-elixir-webpack-official": "^1.0.2",
+    "materialize-autocomplete": "^1.0.7",
     "materialize-css": "^0.97.7",
     "stringify-object": "^3.1.0",
     "vue": "^1.0.26",
@@ -27,5 +28,8 @@
     "webpack": "^1.14.0",
     "webpack-dev-server": "^1.16.2",
     "webpack-merge": "^0.14.1"
+  },
+  "devDependencies": {
+    "lodash": "^4.11.2"
   }
 }

resources/assets/spa/js/components/bank-account/BankAccountCreate.vue

@@ -2,6 +2,9 @@
 <script>
     import {BankAccount, Bank} from '../../services/resources';
     import PageTitleComponent from '../../../../_default/components/PageTitle.vue';
+    import 'materialize-autocomplete';
+    import _ from 'lodash';
+
     export default{
         components: {
             'page-title': PageTitleComponent
@@ -32,7 +35,38 @@
             getBanks(){
                 Bank.query().then((response) => {
                     this.banks = response.data.data;
+                    this.initAutocomplete();
                 });
+            },
+            initAutocomplete(){
+                let self = this;
+                $(document).ready(() => {
+                    $('#bank-id').materialize_autocomplete({
+                        limit: 10,
+                        multiple: {
+                            enable: false
+                        },
+                        dropdown: {
+                            el: '#bank-id-dropdown'
+                        },
+                        getData(value, callback){
+                            let banks = self.filterBankByName(value);
+                            banks = banks.map((o) => {
+                                return {id: o.id, text: o.name};
+                            })
+                            callback(value, banks);
+                        },
+                        onSelect(item){
+                            self.bankAccount.bank_id = item.id;
+                        }
+                    });
+                });
+            },
+            filterBankByName(name){
+                let banks = _.filter(this.banks, (o) => {
+                    return _.includes(o.name.toLowerCase(), name.toLowerCase());
+                });
+                return banks;
             }
         }
     }

resources/assets/spa/js/components/bank-account/BankAccountUpdate.vue

@@ -2,6 +2,9 @@
 <script>
     import {BankAccount, Bank} from '../../services/resources';
     import PageTitleComponent from '../../../../_default/components/PageTitle.vue';
+    import 'materialize-autocomplete';
+    import _ from 'lodash';
+
     export default{
         components: {
             'page-title': PageTitleComponent
@@ -16,7 +19,7 @@
                     bank_id: '',
                     'default': false
                 },
-                banks: [],
+                banks: []
             }
         },
         created(){
@@ -34,12 +37,43 @@
             getBanks(){
                 Bank.query().then((response) => {
                     this.banks = response.data.data;
+                    this.initAutocomplete();
                 });
             },
             getBankAccount(id){
-                BankAccount.get({id: id}).then((response) => {
+                BankAccount.get({id: id, include: 'bank'}).then((response) => {
                     this.bankAccount = response.data.data;
                 });
+            },
+            initAutocomplete(){
+                let self = this;
+                $(document).ready(() => {
+                    $('#bank-id').materialize_autocomplete({
+                        limit: 10,
+                        multiple: {
+                            enable: false
+                        },
+                        dropdown: {
+                            el: '#bank-id-dropdown'
+                        },
+                        getData(value, callback){
+                            let banks = self.filterBankByName(value);
+                            banks = banks.map((o) => {
+                                return {id: o.id, text: o.name};
+                            })
+                            callback(value, banks);
+                        },
+                        onSelect(item){
+                            self.bankAccount.bank_id = item.id;
+                        }
+                    });
+                });
+            },
+            filterBankByName(name){
+                let banks = _.filter(this.banks, (o) => {
+                    return _.includes(o.name.toLowerCase(), name.toLowerCase());
+                });
+                return banks;
             }
         }
     }

resources/assets/spa/js/components/bank-account/_form.html

@@ -25,10 +25,13 @@ <h5>{{title}}</h5>
                 <div class="row">
                     <div class="input-field col s12">
                         <label class="active">Banco</label>
-                        <select v-model="bankAccount.bank_id" id="bank_id" class="browser-default">
+                        <!--<select v-model="bankAccount.bank_id" id="bank_id" class="browser-default">
                             <option value="" disabled selected>Escolha um banco</option>
                             <option v-for="o in banks" :value="o.id">{{o.name}}</option>
-                        </select>
+                        </select>-->
+                        <input type="text" id="bank-id" placeholder="Buscar banco"
+                            autocomplete="off" data-activates="bank-id-dropdown" data-belloworigin="true"/>
+                        <ul id="bank-id-dropdown" class="dropdown-content ac-dropdown"></ul>
                     </div>
                 </div>
                 <div class="row">