Laravel Scout and Vue.Js : How to create Search Function in Laravel 5.3

Laravel 5.3 tutorial : Laravel Scout and Vue.Js, how to create simple search Function in Laravel 5.3

Laravel 5.3 tutorial : This lesson will show you how to create simple search function using Laravel Scout and Vue.Js, at the previews lessons we have learn how to build simple search using GET Method, please read Simple Search Function Using GET Method in laravel 5.3.

How to create Search Function in Laravel 5.3?

First, we will need laravel was installed on our server, if not, i assumed you to read and do step by step on this lessons How to build Blog using laravel step by step.

Video tutorial How to create Search Function in Laravel 5.3

Just watch this video, and follow step by step.


Routes (Web and Api)

web.php

Route::get('/','Api\SearchController@search');

api.php

Route::get('/search', 'Api\SearchController@search');

Api Controller (SearchController.php)

<?php
namespace App\Http\Controllers\Api;
use App\Posts;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class SearchController extends Controller {
    // we will Installing and configuring Laravel Scout
    public function search(Request $req){
      // First we define the error message we are going to show if no keywords
      $error = ['error'=>'No results found'];
      // if the user entered the keyword
      if ($req->has('q')){
        // Using the Laravel Scout syntax to search the products table.
        $posts = Posts::search($req->get('q'))->get();
        // If there are results return them, if none, return the error message.
        return $posts->count() ? $posts : $error;
      } else {
        // we will show all posts data from database
        $posts = Posts::all();
        return view('search')->withPosts($posts);
      }
    }
}

Search.blade.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Simple Vue.Js Search Function</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <div class="container">
      <div class="row" id="posts">
        <div class="col-md-12">
          <div class="input-group input-group-sm">
            <div class="icon-addon addon-md">
              <input type="text" v-model="query" placeholder="What are you looking for?" class="form-control">
            </div>
            <span class="input-group-btn">
              <button type="button" class="btn-sm btn-danger" v-if="!loading" @click="search()">
                Search <i class="fa fa-search"></i>
              </button>
              <button type="button" class="btn-sm btn-danger" v-if="loading" disabled="disabled">
                Searching... <i class="fa fa-search"></i>
              </button>
            </span>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <div class="post-preview" v-for="post in posts">
              <p>
                <span class="well-sm"><strong>
                  <a href="#">@{{ post.title }}</a>
                </strong>
                </span>
                <span class="alert-danger">
                  On @{{ post.created_at }}
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- Show all data posts from database -->
      <div class="row">
        <div class="col-md-12">
          <div class="post-preview">
            <div class="alert alert-warning" v-if="noresult">
              <h2><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                @{{ noresult }}
              </h2>
              <span class="well-sm" v-if="noresult">
                @foreach($posts as $post)
                  <p>
                    <strong><a href="#">{{ $post->description }}</a></strong>
                    <span class="alert-danger">On {{ $post->created_at->format('M d,Y \a\t h:i a') }}</span>
                  </p>
                @endforeach
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.1/vue-resource.min.js"></script>
    <script src="/js/search.js"></script>
  </body>
</html>

search.js

new Vue({
    el: 'body',
    data: {
      posts: [],
      loading: false,
      noresult: 'Showing All Posts',
      query: ''
  },
  methods: {
    search: function() {
        // Clear the error message.
        this.noresult = '';
        // Empty the posts array so we can fill it with the new posts.
        this.posts = [];
        // Set the loading property to true, this will display the "Searching..." button.
        this.loading = true;

        // Making a get request to our API and passing the query to it.
        this.$http.get('/api/search?q=' + this.query).then((response) => {
            // If there was an error set the error message, if not fill the posts array.
            response.body.error ? this.noresult = response.body.error : this.posts = response.body;
            // The request is finished, change the loading to false again.
            this.loading = false;
            // Clear the query.
            this.query = '';
        });
    }
  }
});

More Vue.Js & Laravel Video Tutorial :



Full source code laravel app with vue.js
see you next lessons.

COMMENTS

Next Recomended


Feel free to code it up and send us a pull request.

Hi everyone, let's me know how much this lesson can help your work. Please Subscribe and Follow Our Social Media 'kodeajaib[dot]com' to get Latest tutorials and will be send to your email everyday for free!, Just hit a comment if you have confused. Nice to meet you and Happy coding :) all ^^



Follow by E-Mail


Name

ADO.NET,3,Ajax,6,Android,9,AngularJS,4,ASP.NET,4,Blogger Tutorials,7,Bootstrap,7,C++,1,Codeigniter,2,Cplusplus,6,Crystal Report,6,CSharp,25,Ebook Java,2,FlyExam,1,FSharp,3,Game Development,2,Java,35,JDBC,2,Laravel,84,Lumen,2,MariaDB,2,Ms Access,3,MySQL,31,ODBC,6,OleDB,1,PHP,14,PHP Framework,5,PHP MYSQLI,9,PHP OOP,5,Python,8,Python 3,4,SQL Server,4,SQLite,4,Uncategorized,5,Vb 6,2,Vb.Net,89,Video,48,Vue Js,4,WPF,2,Yii,3,
ltr
item
KODE AJAIB: Laravel Scout and Vue.Js : How to create Search Function in Laravel 5.3
Laravel Scout and Vue.Js : How to create Search Function in Laravel 5.3
Laravel 5.3 tutorial : Laravel Scout and Vue.Js, how to create simple search Function in Laravel 5.3
https://i.ytimg.com/vi/Og8eSwT6qrw/hqdefault.jpg
https://i.ytimg.com/vi/Og8eSwT6qrw/default.jpg
KODE AJAIB
https://www.kodeajaib.com/2016/12/laravel-scout-vuejs-create-search-function.html
https://www.kodeajaib.com/
https://www.kodeajaib.com/
https://www.kodeajaib.com/2016/12/laravel-scout-vuejs-create-search-function.html
true
3214704946184383982
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy