Major incomplete Change

app/Http/Controllers/Companies/CompanyController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers\Companies;
 
+use App\Models\Company;
 use Illuminate\Http\Request;
 use App\Http\Controllers\Controller;
 use App\Http\Resources\Company as CompanyResource;
@@ -54,4 +55,13 @@ class CompanyController extends Controller
     public function destroy($id): CompanyResource {
         return (new DeleteCompany())->execute($id);
     }
+
+    public function search(Request $request){
+        // Get company
+        $companies = Company::where('name', 'LIKE', "%".$request->input('query')."%")
+            ->orWhere('marking', 'LIKE', "%".$request->input('query')."%")->paginate(10);
+
+        // Return collection of companies as a resource
+        return CompanyResource::collection($companies);
+    }
 }

resources/assets/vue/components/common/AccountsSearchComponent.vue

@@ -1,15 +1,40 @@
 <template>
     <div class="row align-items-center justify-content-center p-b-20">
         <div class="col">
-            <div class="input-group transparent ">
-                <input type="text" class="form-control no-border" :placeholder="placeholder" id="icon-filter" name="icon-filter">
-                <span class="input-group-addon bg-white no-border">
-                    <i class="fa fa-search p-r-15 p-l-15"></i>
-                </span>
+            <div class="row">
+                <div class="col p-r-0">
+                    <div class="row">
+                        <div class="col p-r-0">
+                            <input type="text" class="form-control no-border" v-model="query" @keyup="search()" :placeholder="placeholder" id="icon-filter" name="icon-filter">
+                        </div>
+                        <div class="col-auto bg-white pointer" @click="closeSearch()">
+                            <i class="fa fa-times fs-10 muted lh-35"></i>
+                        </div>
+                    </div>
+                    <div class="row no-margin" :class="{'hide': !isActive}">
+                        <div class="col b-t b-grey no-padding absolute w-100 bg-white" style="z-index: 1;">
+                            <div class="row no-margin b-b b-grey" v-for="result in results" v-bind:key="result.id">
+                                <div class="col">
+                                    <a :href="route('companies.profile', {companyId: result.id})">
+                                        <div class="row bold align-items-center p-t-10 p-b-10 ">
+                                            <div class="col-3 p-r-10">
+                                                <div class="block p-l-10 p-r-10 p-t-5 p-b-5 bg-master text-white fs-9 b-rad-none text-center">
+                                                    {{result.marking}}
+                                                </div>
+                                            </div>
+                                            <div class="col p-l-0 fs-10">{{result.name}}</div>
+                                        </div>
+                                    </a>
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
-        <div class="col-auto p-l-0">
-            <div class="text-success fs-12 bold">Advanced Search</div>
+        <div class="col-auto">
+            <!--<div class="text-success fs-12 bold">Advanced Search</div>-->
         </div>
         <div class="col-1"></div>
     </div>
@@ -22,5 +47,32 @@
                 default: "Search user or group"
             }
         },
+        data(){
+            return {
+                query: "",
+                results: [],
+                isActive: false
+            }
+        },
+        methods: {
+            route: route,
+            search(){
+                if(this.query.length > 2 ){
+                    fetch(route('api.company.search') + '?query=' + this.query).then(response => response.json())
+                        .then(response => {
+                            this.results = response.data;
+                            this.isActive = true;
+                        })
+                        .catch(error => console.log(error))
+
+                } else {
+                    this.isActive = false;
+                }
+            },
+            closeSearch(){
+                this.query = '';
+                this.isActive = false;
+            },
+        }
     }
 </script>

resources/assets/vue/components/company/lists/CompaniesListComponenet.vue

@@ -36,7 +36,6 @@
                     .then(response => {
 
                         this.companies = response.data;
-                        console.log(this.companies);
 
                         this.$refs.pagination.makePagination(response.meta, response.links);
 

routes/api.php

@@ -27,6 +27,9 @@ Route::group(['middleware' => 'api', 'prefix' => 'v1', 'as' => 'api.'], function
         // List companies
         Route::get('/list', 'CompanyController@index')->name('list');
 
+        // search companies
+        Route::get('/search', 'CompanyController@search')->name('search');
+
         // List single company
         Route::get('{id}/profile', 'CompanyController@show')->name('profile');