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

How to put dynamic name of functions in javascript?

Dynamic names of functions in javascript:

In some conditions we are in need of dynamic function names.

In js we can do this by creating classes.

for e.g.

 var surgeonVal = 1; // value for id
     function surgeonPagination() {
    $('.nav-next').click(function (e) {  // next button clicked
    var result = Class.callFunc(surgeonVal);
    surgeonVal++;
    });
 }

var Class = (function (window) {
    return {
        1: function () {
            //Do some work
        },
        2: function () {
            //Do some work
            }
        },
        3: function () {
            //Do some work
        },
       
        callFunc: function (funcName) {
            return this[funcName]();
        }
    };
})(window);

In this above example I want to call some functions as accordingly to change value of "surgeonVal". So I create a class and call it's function as accordingly.

Thanks