Home » PHP Laravel Autocomplete search from Database Example

PHP Laravel Autocomplete search from Database Example

Today, We want to share with you PHP Laravel Autocomplete search from Database Example Tutorial.In this post we will show you Autocomplete Textbox using jQuery, PHP, Laravel and MySQL, hear for Laravel Ajax Autocomplete Search from Database Example we will give you demo and example for implement.In this post, we will learn about Laravel Autocomplete using Bootstrap Typeahead JS Example with Demo with an example.

PHP Laravel Autocomplete search from Database Example Tutorial

There are the Following The simple About PHP Laravel Autocomplete search from Database Example Tutorial Full Information With Example and source code.

As I will cover this Post with live Working example to develop Manual Laravel Autocomplete search from Database, so the Laravel Ajax Autocomplete Search from Database for this example is following below.

Read Also:  remove non alphanumeric characters javascript
  • Define routes
  • Set up controllers
  • changes the view
  • Step 1 : Create a Laravel routes

    first of all toy need to Define a Laravel route in main file web.php to showing New HTML search form,

    route/web.php

    Route::view('/find', 'find');
    

    Include a Laravel search route

    Route::get('/member/find', '[email protected]');
    

    Step 2 : Set up controllers

    make a Laravel LiveFindController

    LiveFindController

    public function searchMembers(Request $request)
    {
        return Member::where('name', 'LIKE', '%'.$request->q.'%')->get();
    }
    

    Step 3 :changes the view Blade files

    Path : resources/views/find.blade.php

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="www.pakainfo.com">
        <meta name="author" content="sapnesh_naik">
        <title>Autocomplete Search Bar in Laravel with Typehead.js - Laravel Search Autocomplete tutorial</title>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="{{asset('starter-template.css')}}" rel="stylesheet">
         <style>
            .twitter-typeahead,
            .tt-hint,
            .tt-input,
            .tt-menu{
                width: auto ! important;
                font-weight: normal;
    
            }
         </style>
      </head>
      <body>
    
        <div class="pakainfo container">
          <div class="starter-template pakainfo" style="align-text:right">
            <h1>Laravel Search Autocomplete - Laravel Autocomplete Search from database using jQuery</h1>
            <p>Laravel Autocomplete using Bootstrap Typeahead JS Example with Demo</p>
            <br>
            <input type="text" id="find" placeholder="Type to find members" autocomplete="off" >
          </div>
    
        </div>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    
    
        <script src="//twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
        <script>
            $(document).ready(function() {
                var bloodhound = new Bloodhound({
                    datumTokenizer: Bloodhound.tokenizers.whitespace,
                    queryTokenizer: Bloodhound.tokenizers.whitespace,
                    remote: {
                        url: '/member/find?q=%QUERY%',
                        wildcard: '%QUERY%'
                    },
                });
    
                $('#find').typeahead({
                    hint: true,
                    highlight: true,
                    minLength: 1
                }, {
                    name: 'members',
                    source: bloodhound,
                    display: function(data) {
                        return data.name  //here HTML Input value one by one to be changes and set when you choose a suggestion for Laravel autocomplete search with typeahead.js.
                    },
                    templates: {
                        empty: [
                            '<div class="pakainfo list-group find-results-dropdown"><div class="pakainfo list-group-item">Nothing found.</div></div>'
                        ],
                        header: [
                            '<div class="pakainfo list-group find-results-dropdown">'
                        ],
                        suggestion: function(data) {
                        return '<div style="font-weight:normal; margin-top:-15px ! important;" class="pakainfo list-group-item">' + data.name + '</div></div>'
                        }
                    }
                });
            });
        </script>
    
      </body>
    </html>
    

    Angular 6 CRUD Operations Application Tutorials

    Read :

    Read Also:  Laravel Ajax Autocomplete Search Box Example

    Related Search : laravel autocomplete search bootstrap, laravel autocomplete jquery, laravel jquery autocomplete json, laravel autocomplete typeahead, laravel autocomplete from database, autocomplete typeahead bootstrap laravel

    Summary

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

    I hope you get an idea about PHP Laravel Autocomplete search from Database Example Tutorial.
    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.

    Read Also:  How To Print Last Query In PHP?

    Related FAQ

    Here are some more FAQ related to this Article:

    1. Read Also:  jQuery Ajax Autocomplete Search From Database in Laravel 7
    2. Read Also:  Simple JavaScript Get current url Example
    3. Read Also:  jQuery Find Nested Parent Child Elements HTML DOM
    4. Read Also:  AngularJS HTTP AJAX Example Tutorial From Scratch
    5. Read Also:  Get last inserted ID laravel 5.7 Examples
    6. Read Also:  Get maximum key value of array in PHP
    7. Read Also:  Remove empty values from array in PHP
    8. Read Also:  Laravel 5.8 Autocomplete Textbox Fields Using jQuery
    9. Read Also:  Angularjs Store in Localstorage - ngStorage
    10. Read Also:  Ajax Autocomplete Live Search Suggestion using PHP MySQL

    Leave a Comment

    Your email address will not be published. Required fields are marked *