Saturday, November 19, 2016

Laravel 5.3 search bar using jquery Autocomplete

Laravel 5.3 search bar using jquery Autocomplete:

For set up search bar in Laravel 5.3, we have to do the folloing things:

In your blade file write this code:
Also add jquery library in your code which is mentioned in this code.

<input  id="surgeon-name"  type="text" class="form-control pd-l-50" placeholder="SEARCH BY SURGEON NAME">

<script src="{{asset('js/jquery-1.12.4.js')}}"></script>
<script src="{{asset('js/jquery-ui.js')}}"></script>
<script>
    (function () {
    src = "/prefcard/maker-search-surgeon";
    $("#surgeon-name").autocomplete({
    source: function (request, response) {
    $.ajax({
    url: src,
            dataType: "json",
            data: {
            term: request.term
            },
            success: function (data) {
            response(data);
            }
    });
    },
            min_length: 3,
            select: function (event, ui)
            {
//                console.log(ui.item.value);return false;
            var test = ui.item.value ? ui.item.value : '';
            if (test != '')
            {
            var url = '/prefcard/maker-search-surgeon';
            var formAutocomplete = $('<form action="' + url + '" method="post">' +
                    '<input type="hidden" name="_token" value="{{ csrf_token() }}">' +
                    '<input type="text" name="term" value="' + ui.item.value + '" />' +
                    '</form>');
            $('body').append(formAutocomplete);
            formAutocomplete.submit();
            }
            }

    });
    })();
</script>


In your routes file write this code

                Route::get('maker-search-surgeon', 'SearchController@searchSurgeon');
                Route::post('maker-search-surgeon', 'SearchController@postSearchSurgeon');


In your SearchController create two method

    public function searchSurgeon(Request $request) {
        $query = $request->get('term', '');

        $results = DB::table('surgeon')
                        ->where('firstname', 'LIKE', '%' . $query . '%')
                        ->orWhere('lastname', 'LIKE', '%' . $query . '%')
                        ->take(5)->get();

        $data = array();
        foreach ($results as $result) {
            $data[] = array('value' => $result->firstname . ' ' . $result->lastname, 'id' => $result->id);
        }
        if (count($data))
            return $data;
        else
            return ['value' => 'No Result Found', 'id' => ''];
    }

    public function postSearchSurgeon(Request $request) {
        //Do whatever you want to search accordingly name and then return
        return view('dashboard')->with('surgeon', $surgeon);
    }


Thanks

4 comments:

  1. Hey Nice write uo, keep Writing, Do you know you can also post your laravel related articles
    on http://www.laravelinterviewquestions.com/submit-an-article too.
    Thanks !

    ReplyDelete
  2. Add Ajax and live search function in Laravel search bar and you have got a working search engine like Google. This tutorial guides you on creating live search bar in laravel: https://www.cloudways.com/blog/live-search-laravel-ajax/

    ReplyDelete
  3. Hi,

    useful info,


    Providing Laravel Web Developmentl shopping cart, Website Designing and Payment gateway integration.

    Ecommerce Website Development
    Online Business Website Development
    Ecommerce Portal Development

    For more details about my Web Development and Laravel Web Development Services.

    ReplyDelete
  4. We are a specialized Laravel Development Company, which offers the best travel Website & Application Services. We assure effective and quality work . +91-9806724185 or Contact@expresstechsoftwares.com

    ReplyDelete