ایجاد جستجو زنده (ایجکس) با Vue و لاراول

نتیجه کار
نتیجه کار

به شخصه خیلی دنبال همچین جستجویی گشتم و تو رفرنس های فارسی چیز به درد بخوری پیدا نکردم تا این که به پکیج spatie/laravel-searchable رسیدم کار باهاش خیلی اسونه و فقط کافیه مدلی که میخوایم جستجو بشه تریتشو یوز کنیم

بریم سر اصل مطلب ابتدا پکیج spatie/laravel-searchable را با دستور زیر نصب کنید:

composer require spatie/laravel-searchable

بعد از نصب داخل مدل مورد نظرتون برید : 

<?php
namespace App;
use Spatie\Searchable\Searchable;
use Spatie\Searchable\SearchResult;
use Illuminate\Database\Eloquent\Model;
class Product extends Model implements Searchable
{
    public function getSearchResult(): SearchResult
    {       $url = $this->path();
         
       return new SearchResult($this, $this->title, $url);
    }
    public function path(){
        return $this->slug;
    }
}

خب همانطور که میبینید ما از implements Searchable استفاده کردیم و یک متد هم به صورت اتوماتیک برای ما اضافه میشه .

حالا نیاز به یک rote داریم که اطلاعات باهاش به کنترلر بفرستیم 

Route::get('product/search', 'SearchController@index');

بعد از ایجاد مسیر ، کنترلر مربوطه هم با دستور زیر میسازیم:

php artisan make:controller SearchController

بعد از ایجاد کنترلر کد های زیر را در ان قرار میدهیم


<?php
namespace App\Http\Controllers;
use App\Product;
use Spatie\Searchable\Search;
use Illuminate\Http\Request;

class SearchController extends Controller{  

public function index(Request $request)
  {
    $results = (new Search())
//قسمت هایی که میخوایم جستجو بشن
    ->registerModel(Product::class, ['title', 'body'])
    ->search($request->input('query'));
    
    return response()->json($results);
  }
}


خب تا اینجای کار قسمت بکند ما اماده شده و نیاز به ایجاد قسمت فراند داریم که با vue این قسمت میسازیم:


<template>     
        <div>       
                <input type=&quottext&quot placeholder=&quotSearch&quot v-model=&quotquery&quot>               
                <ul v-if=&quotresults.length > 0 && query&quot>        
                         <li v-for=&quotresult in results.slice(0,10)&quot :key=&quotresult.id&quot>           
                                <a :href=&quotresult.url&quot>             
                                        <div v-text=&quotresult.title&quot></div>           
                                </a>         
                        </li>       
                </ul>     
        </div> 
</template>

    export default {
        data() {
            return {
                query: &quot&quot,
                results: []
            };
        },
        watch: {
            query(after, before) {
                this.searchMembers();
            }
        },
        methods: {
            searchMembers() {
                axios.get('products/search', { params: { query: this.query } })
                    .then(response => this.results = response.data)
                    .catch(error => {});
            }
        }
    }

این هم از قسمت ویو جستجو . حالا میتونید این کامپوننت رو هر جای سایتتون که میخواید فراخوانی کنید