Multiple search addon

resources/js/app.js

@@ -30,6 +30,7 @@ Vue.component('load-graph', require('./components/LoadGraph.vue').default);
 Vue.component('processes-graph', require('./components/ProcessesGraph.vue').default);
 Vue.component('disk-graph', require('./components/DiskGraph.vue').default);
 Vue.component('search-input', require('./components/SearchInput.vue').default);
+Vue.component('search-multiple-input', require('./components/SearchMultipleInput.vue').default);
 /**
  * Next, we will create a fresh Vue application instance and attach it to
  * the page. Then, you manwy begin adding components to this application

resources/js/components/SearchMultipleInput.vue

@@ -1,25 +1,32 @@
 <template>
-  <div>
-    <div class="form-group">
-        <label for="ssel1">Typ:</label>
-        <select v-model="type" class="form-control" id="ssel1">
-        <option>Užívateľ</option>
-        <option>Meno PC</option>
-        <option>Ip adresa</option>
-        </select>
-    </div> 
-    <vue-suggestion :items="items" 
-                    v-model="item" 
-                    :setLabel="setLabel"
-                    :itemTemplate="itemTemplate"
-                    @changed="inputChange" 
-                    @selected="itemSelected">
-    </vue-suggestion>
-  </div>
+    <div class="row form-group">
+        <label for="ssel1" class="col-sm-2">Typ</label>
+        <div class="col-sm-4">
+          <select v-model="type" class="form-control" id="ssel1">
+          <option value="0">Užívateľ</option>
+          <option value="1">Meno PC</option>
+          <option value="2">Ip adresa</option>
+          </select>
+        </div>
+      <div class="col-sm-6">
+        <div class='input-group'>
+          <vue-suggestion :items="items" 
+                          v-model="item" 
+                          :setLabel="setLabel"
+                          :itemTemplate="itemTemplate"
+                          @changed="inputChange" 
+                          @selected="itemSelected">
+          </vue-suggestion>
+          <span class="input-group-append">
+              <button v-on:click="displayResults()" type="button" class="btn btn-secondary">Zobraz</button>
+          </span>       
+        </div>
+      </div>
+    </div>
 </template>
 
 <script>
-import itemTemplate from './item-template.vue';
+import itemTemplate from './item-multi-template.vue';
 export default {
   data () {
     return {
@@ -36,7 +43,7 @@ export default {
       this.item = item;
     },
     setLabel (item) {
-      return item.computer;
+      return item.name;
     },
     inputChange (text) {
         axios.get("search/multicomplete", {

resources/js/components/item-multi-template.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <span>{{ item.name }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    item: { required: true },
+  }
+}
+</script>

resources/views/search.blade.php

@@ -7,11 +7,33 @@
 @stop
 
 @section('links')
-                <div class="links">
-                    <a href="{{ url('/') }}">Monitoring</a>
-                </div>                    
+        <div class="links">
+            <a href="{{ url('/') }}">Monitoring</a>
+        </div>                    
 @stop
 
 @section('content')
+<div id="app">
+            <search-multiple-input></search-multiple-input>
+</div>
+<script>
+    $(document).ready( function() {
+    
+    function sleep (time) {
+         return new Promise((resolve) => setTimeout(resolve, time));
+    }
+    
+        var app = new Vue({
+            el: "#app",
+            data: {
+                counter: 0
+            },
+            methods: {
+                
+            },
+            
+        });
 
+});
+  </script>
 @stop