Laravel autocomplete typeahead search example

by
Laravel Redirect To Another URL / Web Page - HTTP Laravel Redirects

Today, We want to share with you Laravel autocomplete typeahead search example.In this post we will show you Laravel Search with Laravel and Typeahead.js, hear for Laravel autocomplete search with typeahead.js we will give you demo and example for implement.In this post, we will learn about Laravel 5.7 Autocomplete Search from Database using Typeahead JS with an example.

Laravel autocomplete typeahead search example

There are the Following The simple About Laravel 5.7 Autocomplete Search from Database Full Information With Example and source code.

As I will cover this Post with live Working example to develop Laravel 5 Autocomplete using Bootstrap Typeahead JS, so the some major files and Directory structures for this example is following below.

HTML Interface

index.php



Student Management System




laravel autocomplete search bootstrap

    

        

            

                

                    
We are here to help!

                    

                    

                    

                        

                            <form action="create-student.php" class="form-horizontal" id='form'>
                                
                                
                            
                        

                    

                

            

        

    

	Free Download Example - Pakainfo.com

 
    
    
    
    var subject_name = '';
        $(document).ready(function() {
            var bloodhound = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.whitespace,
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {

                    url: 'liveautosearch?subject_name=' + subject_name + '&query=%QUERY%',
                    wildcard: '%QUERY%'
                },
            });
            //console.log(bloodhound);
            $('#autosearch').typeahead({
                hint: false,
                highlight: true,
                minLength: 1
            }, {
                name: 'schools',
                source: bloodhound,
                display: function(data) {
                    return data.title;  //Input value to be set when you select a suggestion. 
                },
                templates: {
                    empty: [

                        '
Nothing found.
' ], header: [ '
' ], suggestion: function(data) { //console.log(data); return '
' + data.title + '
' } } }); }); $(document).on('click', '#autosearch-button', function () { var set_input_msg = $("#autosearch").val(); localStorage.setItem("select_subject", set_input_msg); }); /* suggestion box css */ form .dropdown-menu > li a { display: block !important; height: 100% !important; color: inherit !important; text-decoration: none !important; padding: 8px 20px; font-size: 14px; } form .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover { background-color: #eee !important; } form .dropdown-menu{ width: 100%; } #autosearch-box { position: relative; width: 100%; margin: 0; } #autosearch-form { height: 40px; border: 1px solid #999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #fff; overflow: hidden; } #autosearch-text { font-size: 14px; color: #ddd; border-width: 0; background: transparent; } #autosearch-box input[type="text"] { width: 100%; padding: 11px 0 12px 1em; color: #333; outline: none; } #autosearch-button { position: absolute; top: 0; right: 0; font-size: 14px; color: #fff; text-align: center; line-height: 43px; border-width: 0; background-color: /*#003c88*/ #1e4e72; color: rgba(255,255,255, 0.84); -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; cursor: pointer; } #autosearch{ border-radius:0; -webkit-box-shadow: 2px 3px 0px -2px #3d3d3d; padding:10px; border:0px; outline: none; border-top: 1px solid #3d3d3d; border-left: 1px solid #3d3d3d; border-right: 1px solid #3d3d3d; border-bottom: 1px solid #3d3d3d; } #autosearch:hover{ -webkit-box-shadow: 3px 6px 7px -3px #3d3d3d; } .twitter-typeahead{ display: block !important; } .list-group { margin-bottom: 0px !important; } .twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; } .list-group-item { text-align: left; }

Laravel File – Routing

routes/api.php

get('/user', function (Request $request) {
    return $request->user();
});

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: *');
header('Access-Control-Allow-Headers: *');

Route::get('liveautosearch','API\StudentController@liveautosearch');

app/http/controllers/API/StudentController.php

Public function liveautosearch(Request $request)
{ 
	$term = $request->get('query');
	$subject_name = trim($request->get('subject_name'));
	$id =DB::table('subjects')->where('name', $subject_name)->first()->id;
	return DB::table('schools')->where([['title', 'LIKE', '%'.$term.'%'],['subject_id', '=', $id]])->get();

}
Angular 6 CRUD Operations Application Tutorials

Read :

Related Search : laravel autocomplete search bootstrap, laravel autocomplete jquery, laravel jquery autocomplete json, laravel autocomplete typeahead, laravel autocomplete from database, autocomplete typeahead bootstrap laravel,Laravel autocomplete search with typeahead.js,Laravel And JqueryUI’s Autocomplete,Laravel 5.7 Autocomplete Search from Database using Typeahead JS,Laravel 5.7 Autocomplete using Bootstrap Typeahead JS Example,Search with Laravel and Typeahead.js,Laravel 5.7 Autocomplete using Bootstrap Typeahead JS Example with Demo

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Laravel autocomplete typeahead search example.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

No related posts.

Leave a Comment