Complex Search from a form in Vue and results from Laravel

@alidnet I recommend to take a look at Laravel Scout for the backend and Algolia Vue InstantSearch for the frontend.

https://laravel.com/docs/6.x/scout

https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/vue/

Thanks @sti3bas, unfortunately i dont have the budget yet for Algolia.

I was looking to do a search like this

    $Properties = DB::table('unit')
    ->join('property', 'property.id', '=', 'unit.propid')
    ->join('masterarea', 'masterarea.areaid', '=', 'property.areaid')
    ->join('masterzone', 'masterzone.zoneid', '=', 'masterarea.zoneid')
    ->join('masterregion', 'masterregion.regionid', '=', 'masterarea.regionid')
    ->select('unit.id', 'unit.unit', 'unit.tolet', 'unit.forsale', 'unit.type', 'property.address', 'property.grade', 'property.type as proptype', 'masterarea.Area', 'masterzone.zone', 'masterregion.region')
    ->whereIn('property.areaid', [61, 62, 69])
    ->whereIn('unit.type', ['Commercial', 'Retail'])
    ->where('unit.forsale','=', '')
    ->where('unit.tolet','=', '')
     ->paginate(500);

    return $Properties;

but im not sure how to 1 pass the requests from a vue form to my controller via axios and to how to use the desired requests in my query

@alidnet show the code of your form.

I have not really got it worked out, struggling to piece it all together, this is what i have so far

<div class="card shadow m-0 p-2">
            <form @submit.prevent="searchProp()">
                <div>
                <multiselect v-model="value" tag-placeholder="Add this as new tag" placeholder="Search for Area's" label="Area, region" track-by="AreaID" :options="options" :multiple="true" :taggable="true" @tag="addTag"></multiselect>
                <pre class="language-json"><areaid>{{ value }}</areaid></pre>
                </div>
            <div>
                <label><input type="checkbox" v-model="forsale"><span>For Sale</span></label>
                <label><input type="checkbox" v-model="tolet"><span>To Let</span></label>
            </div>
            <div>
               <label><input type="checkbox" v-model="unittype"><span>Office</span></label>
               <label><input type="checkbox" v-model="unittype"><span>Industrial</span></label>
               <label><input type="checkbox" v-model="unittype"><span>Retail</span></label>
               <label><input type="checkbox" v-model="unittype"><span>Land</span></label>
               <label><input type="checkbox" v-model="unittype"><span>Residential</span></label>
            </div><div>
               <input type="text" class="form-control" v-model="minsize" placeholder="Min Size">
               <input type="text" class="form-control" v-model="maxsize" placeholder="Max Size">
               <button class="btn btn-warning text-white pull-right" type="submit">Search</button>
            </div>
            </form>
</div>

@alidnet seems fine, now you just have to make a request to the backend.

@alidnet there is a mysql driver for scout, might be worth a look..

Thank you @sti3bas so much for your help thus far. This is the part that confuses me, I'm not sure what the request should look like. I have the below for a text search but that's just one query. and how do I bring in the requested area, unittype, forsale, tolet into my controller query.

let query = this.search;
              axios.get('../api/property/advsearch?q=' + query)
              .then((data) => {
                  this.props = data.data
              })

I think I'm slowly making progress, getting stuck on passing my area array request into the query, it only returns results from the first area id

        public function index()
    {        
        
        $forsale = \Request::get('forsale');
        $tolet = \Request::get('tolet');
        $areas = \Request::get('areas');
        $areas = str_replace("%27","'",$areas);
        $areatest[] = '62, 63, 65';
        $unittype[] = "";

        $Properties = DB::table('unit')
        ->join('property', 'property.id', '=', 'unit.propid')
        ->join('masterarea', 'masterarea.areaid', '=', 'property.areaid')
        ->join('masterzone', 'masterzone.zoneid', '=', 'masterarea.zoneid')
        ->join('masterregion', 'masterregion.regionid', '=', 'masterarea.regionid')
        ->select('unit.id', 'unit.unit', 'unit.tolet', 'unit.forsale', 'unit.type', 'property.address', 'property.grade', 'property.type as proptype', 'masterarea.Area', 'masterzone.zone', 'masterregion.region')
        ->whereIn('property.areaid', [$areatest])
        ->whereIn('unit.type', ['Industrial','Retail'])
        ->where('unit.forsale','=', "$forsale")
        ->where('unit.tolet','=', "$tolet")
        ->orderBy('property.id')
        ->paginate(5000);

        return $Properties; 
        
    }

@alidnet what do you get from \Request::get('areas')?

from my vue... not sure if im doing it right but just testing as per below.

       loadProps() {

                        let forsale= '1';
                        let tolet= '';
                        let areas = "62, 63, 65"; 

                axios.get('../api/property/advancesearch?forsale='+forsale+"&tolet="+tolet+"&areas="+areas)
                .then(({ data }) => (this.props = data));
            },

@alidnet pass it as an array: https://stackoverflow.com/a/51444749. It will simplify things a lot:

axios.get('/api/property/advancesearch', {
  params: {
    forsale: 1,
    tolet: '',
    areas: [62, 63, 65]
  },
  paramsSerializer: params => {
    return qs.stringify(params)
  }
});

Then in the controller you will be able to do it this way ->whereIn('property.areaid', \Request::get('areas')).

@sti3bas Thank you for the direction, I will try that now.

@sti3bas THANK YOU SO MUCH, finally it works

@alidnet glad to help :)