Multiple search addon

app/Http/Controllers/Search.php

@@ -53,6 +53,44 @@ class Search extends Controller
 		return Response::json($results);
 	}
 
+	public function multicomplete(){
+		$term = Request::input('term');
+		$type = Request::input('type');
+		$results = [];
+
+		if ($type == 0) {
+			$qs = DB::table('users')
+			->where('name','LiKE',$term.'%')
+			->pluck('name','id');
+
+			foreach ($qs as $id => $name) {
+				$results[] = [ 'id' => $id, 'name' => $name];
+			}
+		}
+		if ($type == 1) {
+			$qs = DB::table('computers')
+			->where('computer','LiKE',$term.'%')
+			->pluck('computer','id');
+
+			foreach ($qs as $id => $name) {
+				$results[] = [ 'id' => $id, 'name' => $name];
+			}
+		}
+		if ($type == 2) {
+			$qs = DB::table('user_ip')
+			->select('ip')
+			->where('ip','LIKE',$term.'%')
+			->distinct()
+			->pluck('ip');
+
+			foreach ($qs as $ip) {
+				$results[] = [ 'id' => $ip, 'name' => $ip];
+			}
+		}
+
+		return Response::json($results);
+	}
+
 	public function search($var = null)
 	{
 		$ip = Request::input('ip');

public/js/app.js

@@ -2104,6 +2104,7 @@ __webpack_require__.r(__webpack_exports__);
         xlabel: 'Dátum',
         labels: ['Dátum', 'Celkom', 'Pouzita', 'Volna'],
         ylabel: 'Bytes',
+        labelsKMG2: true,
         fillGraph: true
       },
       series: []
@@ -2342,6 +2343,79 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/SearchMultipleInput.vue?vue&type=script&lang=js&":
+/*!******************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/SearchMultipleInput.vue?vue&type=script&lang=js& ***!
+  \******************************************************************************************************************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _item_multi_template_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./item-multi-template.vue */ "./resources/js/components/item-multi-template.vue");
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+  data: function data() {
+    return {
+      item: {},
+      type: null,
+      items: [],
+      itemTemplate: _item_multi_template_vue__WEBPACK_IMPORTED_MODULE_0__["default"]
+    };
+  },
+  methods: {
+    itemSelected: function itemSelected(item) {
+      this.item = item;
+    },
+    setLabel: function setLabel(item) {
+      return item.name;
+    },
+    inputChange: function inputChange(text) {
+      var _this = this;
+
+      axios.get("search/multicomplete", {
+        params: {
+          type: this.type,
+          term: text
+        }
+      }).then(function (response) {
+        _this.items = response.data;
+      })["catch"](function (error) {
+        console.log(error);
+      });
+    }
+  }
+});
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/TempGraph.vue?vue&type=script&lang=js&":
 /*!********************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/TempGraph.vue?vue&type=script&lang=js& ***!
@@ -2407,6 +2481,31 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/item-multi-template.vue?vue&type=script&lang=js&":
+/*!******************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/item-multi-template.vue?vue&type=script&lang=js& ***!
+  \******************************************************************************************************************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+//
+//
+//
+//
+//
+//
+/* harmony default export */ __webpack_exports__["default"] = ({
+  props: {
+    item: {
+      required: true
+    }
+  }
+});
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/item-template.vue?vue&type=script&lang=js&":
 /*!************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/item-template.vue?vue&type=script&lang=js& ***!
@@ -65829,6 +65928,115 @@ render._withStripped = true
 
 
 
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/SearchMultipleInput.vue?vue&type=template&id=2ce22892&":
+/*!**********************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/SearchMultipleInput.vue?vue&type=template&id=2ce22892& ***!
+  \**********************************************************************************************************************************************************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; });
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c("div", { staticClass: "row form-group" }, [
+    _c("label", { staticClass: "col-sm-2", attrs: { for: "ssel1" } }, [
+      _vm._v("Typ")
+    ]),
+    _vm._v(" "),
+    _c("div", { staticClass: "col-sm-4" }, [
+      _c(
+        "select",
+        {
+          directives: [
+            {
+              name: "model",
+              rawName: "v-model",
+              value: _vm.type,
+              expression: "type"
+            }
+          ],
+          staticClass: "form-control",
+          attrs: { id: "ssel1" },
+          on: {
+            change: function($event) {
+              var $$selectedVal = Array.prototype.filter
+                .call($event.target.options, function(o) {
+                  return o.selected
+                })
+                .map(function(o) {
+                  var val = "_value" in o ? o._value : o.value
+                  return val
+                })
+              _vm.type = $event.target.multiple
+                ? $$selectedVal
+                : $$selectedVal[0]
+            }
+          }
+        },
+        [
+          _c("option", { attrs: { value: "0" } }, [_vm._v("Užívateľ")]),
+          _vm._v(" "),
+          _c("option", { attrs: { value: "1" } }, [_vm._v("Meno PC")]),
+          _vm._v(" "),
+          _c("option", { attrs: { value: "2" } }, [_vm._v("Ip adresa")])
+        ]
+      )
+    ]),
+    _vm._v(" "),
+    _c("div", { staticClass: "col-sm-6" }, [
+      _c(
+        "div",
+        { staticClass: "input-group" },
+        [
+          _c("vue-suggestion", {
+            attrs: {
+              items: _vm.items,
+              setLabel: _vm.setLabel,
+              itemTemplate: _vm.itemTemplate
+            },
+            on: { changed: _vm.inputChange, selected: _vm.itemSelected },
+            model: {
+              value: _vm.item,
+              callback: function($$v) {
+                _vm.item = $$v
+              },
+              expression: "item"
+            }
+          }),
+          _vm._v(" "),
+          _c("span", { staticClass: "input-group-append" }, [
+            _c(
+              "button",
+              {
+                staticClass: "btn btn-secondary",
+                attrs: { type: "button" },
+                on: {
+                  click: function($event) {
+                    return _vm.displayResults()
+                  }
+                }
+              },
+              [_vm._v("Zobraz")]
+            )
+          ])
+        ],
+        1
+      )
+    ])
+  ])
+}
+var staticRenderFns = []
+render._withStripped = true
+
+
+
 /***/ }),
 
 /***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/TempGraph.vue?vue&type=template&id=7da20202&scoped=true&":
@@ -65865,6 +66073,30 @@ render._withStripped = true
 
 
 
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/item-multi-template.vue?vue&type=template&id=f36cd2e6&":
+/*!**********************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/item-multi-template.vue?vue&type=template&id=f36cd2e6& ***!
+  \**********************************************************************************************************************************************************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; });
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c("div", [_c("span", [_vm._v(_vm._s(_vm.item.name))])])
+}
+var staticRenderFns = []
+render._withStripped = true
+
+
+
 /***/ }),
 
 /***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/item-template.vue?vue&type=template&id=b8f3488e&":
@@ -80903,6 +81135,7 @@ Vue.component('load-graph', __webpack_require__(/*! ./components/LoadGraph.vue *
 Vue.component('processes-graph', __webpack_require__(/*! ./components/ProcessesGraph.vue */ "./resources/js/components/ProcessesGraph.vue")["default"]);
 Vue.component('disk-graph', __webpack_require__(/*! ./components/DiskGraph.vue */ "./resources/js/components/DiskGraph.vue")["default"]);
 Vue.component('search-input', __webpack_require__(/*! ./components/SearchInput.vue */ "./resources/js/components/SearchInput.vue")["default"]);
+Vue.component('search-multiple-input', __webpack_require__(/*! ./components/SearchMultipleInput.vue */ "./resources/js/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
@@ -81542,6 +81775,75 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+/***/ }),
+
+/***/ "./resources/js/components/SearchMultipleInput.vue":
+/*!*********************************************************!*\
+  !*** ./resources/js/components/SearchMultipleInput.vue ***!
+  \*********************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _SearchMultipleInput_vue_vue_type_template_id_2ce22892___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./SearchMultipleInput.vue?vue&type=template&id=2ce22892& */ "./resources/js/components/SearchMultipleInput.vue?vue&type=template&id=2ce22892&");
+/* harmony import */ var _SearchMultipleInput_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SearchMultipleInput.vue?vue&type=script&lang=js& */ "./resources/js/components/SearchMultipleInput.vue?vue&type=script&lang=js&");
+/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
+
+
+
+
+
+/* normalize component */
+
+var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
+  _SearchMultipleInput_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
+  _SearchMultipleInput_vue_vue_type_template_id_2ce22892___WEBPACK_IMPORTED_MODULE_0__["render"],
+  _SearchMultipleInput_vue_vue_type_template_id_2ce22892___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* hot reload */
+if (false) { var api; }
+component.options.__file = "resources/js/components/SearchMultipleInput.vue"
+/* harmony default export */ __webpack_exports__["default"] = (component.exports);
+
+/***/ }),
+
+/***/ "./resources/js/components/SearchMultipleInput.vue?vue&type=script&lang=js&":
+/*!**********************************************************************************!*\
+  !*** ./resources/js/components/SearchMultipleInput.vue?vue&type=script&lang=js& ***!
+  \**********************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_SearchMultipleInput_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib??vue-loader-options!./SearchMultipleInput.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/SearchMultipleInput.vue?vue&type=script&lang=js&");
+/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_SearchMultipleInput_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
+
+/***/ }),
+
+/***/ "./resources/js/components/SearchMultipleInput.vue?vue&type=template&id=2ce22892&":
+/*!****************************************************************************************!*\
+  !*** ./resources/js/components/SearchMultipleInput.vue?vue&type=template&id=2ce22892& ***!
+  \****************************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_SearchMultipleInput_vue_vue_type_template_id_2ce22892___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/vue-loader/lib??vue-loader-options!./SearchMultipleInput.vue?vue&type=template&id=2ce22892& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/SearchMultipleInput.vue?vue&type=template&id=2ce22892&");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_SearchMultipleInput_vue_vue_type_template_id_2ce22892___WEBPACK_IMPORTED_MODULE_0__["render"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_SearchMultipleInput_vue_vue_type_template_id_2ce22892___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
+
+
+
 /***/ }),
 
 /***/ "./resources/js/components/TempGraph.vue":
@@ -81629,6 +81931,75 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+/***/ }),
+
+/***/ "./resources/js/components/item-multi-template.vue":
+/*!*********************************************************!*\
+  !*** ./resources/js/components/item-multi-template.vue ***!
+  \*********************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _item_multi_template_vue_vue_type_template_id_f36cd2e6___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./item-multi-template.vue?vue&type=template&id=f36cd2e6& */ "./resources/js/components/item-multi-template.vue?vue&type=template&id=f36cd2e6&");
+/* harmony import */ var _item_multi_template_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./item-multi-template.vue?vue&type=script&lang=js& */ "./resources/js/components/item-multi-template.vue?vue&type=script&lang=js&");
+/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
+
+
+
+
+
+/* normalize component */
+
+var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
+  _item_multi_template_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
+  _item_multi_template_vue_vue_type_template_id_f36cd2e6___WEBPACK_IMPORTED_MODULE_0__["render"],
+  _item_multi_template_vue_vue_type_template_id_f36cd2e6___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* hot reload */
+if (false) { var api; }
+component.options.__file = "resources/js/components/item-multi-template.vue"
+/* harmony default export */ __webpack_exports__["default"] = (component.exports);
+
+/***/ }),
+
+/***/ "./resources/js/components/item-multi-template.vue?vue&type=script&lang=js&":
+/*!**********************************************************************************!*\
+  !*** ./resources/js/components/item-multi-template.vue?vue&type=script&lang=js& ***!
+  \**********************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_item_multi_template_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib??vue-loader-options!./item-multi-template.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/item-multi-template.vue?vue&type=script&lang=js&");
+/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_item_multi_template_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
+
+/***/ }),
+
+/***/ "./resources/js/components/item-multi-template.vue?vue&type=template&id=f36cd2e6&":
+/*!****************************************************************************************!*\
+  !*** ./resources/js/components/item-multi-template.vue?vue&type=template&id=f36cd2e6& ***!
+  \****************************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_item_multi_template_vue_vue_type_template_id_f36cd2e6___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/vue-loader/lib??vue-loader-options!./item-multi-template.vue?vue&type=template&id=f36cd2e6& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/item-multi-template.vue?vue&type=template&id=f36cd2e6&");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_item_multi_template_vue_vue_type_template_id_f36cd2e6___WEBPACK_IMPORTED_MODULE_0__["render"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_item_multi_template_vue_vue_type_template_id_f36cd2e6___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
+
+
+
 /***/ }),
 
 /***/ "./resources/js/components/item-template.vue":

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 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>
-    <vue-suggestion :items="items" 
-                    v-model="item" 
-                    :setLabel="setLabel"
-                    :itemTemplate="itemTemplate"
-                    @changed="inputChange" 
-                    @selected="itemSelected">
-    </vue-suggestion>
-  </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

routes/web.php

@@ -32,6 +32,7 @@ Route::any('/log',"Logging@log");
 Route::any('/push',"Push@data");
 
 Route::get('search/autocomplete', 'Search@autocomplete');
+Route::get('search/multicomplete', 'Search@multicomplete');
 Route::post('search', 'Search@search');
 Route::any('/data',"DataController@get");