text 实时搜索laravel searchable和vue

Posted 2021-04-29

composer require spatie/laravel-searchable

<?phpnamespace App;use Spatie\Searchable\Searchable;
use Spatie\Searchable\SearchResult;
use Illuminate\Database\Eloquent\Model;
class Member extends Model implements Searchable
{
    public function getSearchResult(): SearchResult
    {
       $url = route('members.show', $this->id);
         
       return new SearchResult($this, $this->full_name, $url);
    }
}





<?phpnamespace App\Http\Controllers;use App\Member;
use Spatie\Searchable\Search;
use Illuminate\Http\Request;
class MemberSearchController extends Controller
{
  public function index(Request $request)
  {
    $results = (new Search())
    ->registerModel(Member::class, ['first_name', 'last_name'])
    ->search($request->input('query'));
    
    return response()->json($results);
  }
}



Route::get('members/search', 'MemberSearchController@index');








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



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













https://medium.com/@matttonks11/creating-an-instant-search-bar-with-laravel-vue-3127d1bc57b3