Skip to main content

Laravel 5 - Autocomplete Mutiple Fields Using jQuery, Ajax and MySQL


In this example, I am going to search country using autocomplete functionality and while selecting country name from search list, the other fields will populate corresponding to search type.

Step 1: Create Sample Table
 
In first step, I will create sample table "countries" to test this code.

CREATE TABLE `countries` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `sortname` varchar(3) NOT NULL,
 `name` varchar(150) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=247 DEFAULT CHARSET=utf8
 
Step 2: Add routes

In this step, I will add following two routes :

routes/web.php
    

  1. Route::get('autocomplete', 'AjaxAutocompleteController@index');
    2. 

  2. Route::get('searchajax', ['as'=>'searchajax','uses'=>'AjaxAutocompleteController@searchResponse']);
    3.
Using first route, We will display a form to user to search country and get the response from second routes.

Step 3: Create Controller
In this step, I will create AjaxAutocompleteController.php in following path app/Http/Controllers.
app/Http/Controllers/AjaxAutocompleteController.php
    

  1. <?php
    2. 

  2. 

    3. 

  3. namespace App\Http\Controllers;
    4. 

  4. 

    5. 

  5. use Illuminate\Http\Request;
    6. 

  6. 

    7. 

  7. class AjaxAutocompleteController extends Controller
    8. 

  8. {
    9. 

  9.     public function index(){        
    10. 

  10.         return view('autocomplete');
    11. 

  11.     }
    12. 

  12. 

    13. 

  13.     public function searchResponse(Request $request){
    14. 

  14.         $query = $request->get('term','');
    15. 

  15.         $countries=\DB::table('countries');
    16. 

  16.         if($request->type=='countryname'){
    17. 

  17.             $countries->where('name','LIKE','%'.$query.'%');
    18. 

  18.         }
    19. 

  19.         if($request->type=='country_code'){
    20. 

  20.             $countries->where('sortname','LIKE','%'.$query.'%');
    21. 

  21.         }
    22. 

  22.            $countries=$countries->get();        
    23. 

  23.         $data=array();
    24. 

  24.         foreach ($countries as $country) {
    25. 

  25.                 $data[]=array('name'=>$country->name,'sortname'=>$country->sortname);
    26. 

  26.         }
    27. 

  27.         if(count($data))
    28. 

  28.              return $data;
    29. 

  29.         else
    30. 

  30.             return ['name'=>'','sortname'=>''];
    31. 

  31.     }
    32. 

  32. 

    33. 

  33. }
    34.
Step 4: Create View File Now i will create a file autocomplete.blade.php in following path resources/views/.
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.     <title>Laravel 5 - Autocomplete Mutiple Fields Using jQuery, Ajax and MySQL</title>
    5. 

  5.     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    6. 

  6.   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
    7. 

  7.     <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    8. 

  8.   <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    9. 

  9. 

    10. 

  10. </head>
    11. 

  11. <body>
    12. 

  12. 

    13. 

  13. <div class="container">
    14. 

  14.   <h1>Laravel 5 - Autocomplete Mutiple Fields Using jQuery, Ajax and MySQL</h1>
    15. 

  15. 

    16. 

  16.   {!! Form::open() !!}
    17. 

  17.       
    18. 

  18.     <table class="table table-bordered">
    19. 

  19.       <tr>
    20. 

  20.           <th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
    21. 

  21.           <th>S. No</th>
    22. 

  22.           <th>Country Name</th>
    23. 

  23.           <th>Country code</th>
    24. 

  24.       </tr>
    25. 

  25.       <tr>
    26. 

  26.           <td><input type='checkbox' class='chkbox'/></td>
    27. 

  27.           <td><span id='sn'>1.</span></td>
    28. 

  28.           <td><input class="form-control autocomplete_txt" type='text' data-type="countryname" id='countryname_1' name='countryname[]'/></td>
    29. 

  29.           <td><input class="form-control autocomplete_txt" type='text' data-type="country_code" id='country_code_1' name='country_code[]'/> </td>
    30. 

  30.         </tr>
    31. 

  31.       </table>
    32. 

  32. 

    33. 

  33.       <button type="button" class='btn btn-danger delete'>- Delete</button>
    34. 

  34.       <button type="button" class='btn btn-success addbtn'>+ Add More</button>
    35. 

  35.   {!! Form::close() !!}
    36. 

  36. 

    37. 

  37. </div>
    38. 

  38. 

    39. 

  39. <script type="text/javascript">
    40. 

  40.           
    41. 

  41.  $(".delete").on('click', function() {
    42. 

  42.   $('.chkbox:checkbox:checked').parents("tr").remove();
    43. 

  43.   $('.check_all').prop("checked", false); 
    44. 

  44.   updateSerialNo();
    45. 

  45. });
    46. 

  46. var i=$('table tr').length;
    47. 

  47. 

    48. 

  48. $(".addbtn").on('click',function(){
    49. 

  49.   count=$('table tr').length;
    50. 

  50.   
    51. 

  51.     var data="<tr><td><input type='checkbox' class='chkbox'/></td>";
    52. 

  52.       data+="<td><span id='sn"+i+"'>"+count+".</span></td>";
    53. 

  53.       data+="<td><input class='form-control autocomplete_txt' type='text' data-type='countryname' id='countryname_"+i+"' name='countryname[]'/></td>";
    54. 

  54.       data+="<td><input class='form-control autocomplete_txt' type='text' data-type='country_code' id='country_code_"+i+"' name='country_code[]'/></td></tr>";
    55. 

  55.   $('table').append(data);
    56. 

  56.   i++;
    57. 

  57. });
    58. 

  58.         
    59. 

  59. function select_all() {
    60. 

  60.   $('input[class=chkbox]:checkbox').each(function(){ 
    61. 

  61.     if($('input[class=check_all]:checkbox:checked').length == 0){ 
    62. 

  62.       $(this).prop("checked", false); 
    63. 

  63.     } else {
    64. 

  64.       $(this).prop("checked", true); 
    65. 

  65.     } 
    66. 

  66.   });
    67. 

  67. }
    68. 

  68. 

    69. 

  69. function updateSerialNo(){
    70. 

  70.   obj=$('table tr').find('span');
    71. 

  71.   $.each( obj, function( key, value ) {
    72. 

  72.     id=value.id;
    73. 

  73.     $('#'+id).html(key+1);
    74. 

  74.   });
    75. 

  75. }
    76. 

  76. 

    77. 

  77. 

    78. 

  78. 

    79. 

  79. //autocomplete script
    80. 

  80. $(document).on('focus','.autocomplete_txt',function(){
    81. 

  81.   type = $(this).data('type');
    82. 

  82.   
    83. 

  83.   if(type =='countryname' )autoType='name'; 
    84. 

  84.   if(type =='country_code' )autoType='sortname'; 
    85. 

  85.   
    86. 

  86.    $(this).autocomplete({
    87. 

  87.        minLength: 0,
    88. 

  88.        source: function( request, response ) {
    89. 

  89.             $.ajax({
    90. 

  90.                 url: "{{ route('searchajax') }}",
    91. 

  91.                 dataType: "json",
    92. 

  92.                 data: {
    93. 

  93.                     term : request.term,
    94. 

  94.                     type : type,
    95. 

  95.                 },
    96. 

  96.                 success: function(data) {
    97. 

  97.                     var array = $.map(data, function (item) {
    98. 

  98.                        return {
    99. 

  99.                            label: item[autoType],
    100. 

  100.                            value: item[autoType],
    101. 

  101.                            data : item
    102. 

  102.                        }
    103. 

  103.                    });
    104. 

  104.                     response(array)
    105. 

  105.                 }
    106. 

  106.             });
    107. 

  107.        },
    108. 

  108.        select: function( event, ui ) {
    109. 

  109.            var data = ui.item.data;           
    110. 

  110.            id_arr = $(this).attr('id');
    111. 

  111.            id = id_arr.split("_");
    112. 

  112.            elementId = id[id.length-1];
    113. 

  113.            $('#countryname_'+elementId).val(data.name);
    114. 

  114.            $('#country_code_'+elementId).val(data.sortname);
    115. 

  115.        }
    116. 

  116.    });
    117. 

  117.    
    118. 

  118.    
    119. 

  119. });
    120. 

  120. </script>
    121. 

  121. 

    122. 

  122. </body>
    123. 

  123. </html>
    124.
Labels:

Comments

Post a Comment

Popular posts from this blog

Async Queues In Laravel

Push a function/closure to the background. For Laravel 5.4, check the 0.6 branch For Laravel 5.3, check the 0.5 branch Just like the 'sync' driver, this is not a real queue driver. It is always fired immediatly. The only difference is that the closure is sent to the background without waiting for the response. This package is more usable as an alternative for running incidental tasks in the background, without setting up a 'real' queue driver. Note: This is using the DatabaseQueue, so make sure you set that up first, including migrations. Install Require the latest version of this package with Composer composer require barryvdh/laravel-async-queue Add the Service Provider to the providers array in config/app.php Barryvdh\Queue\AsyncServiceProvider::class, You need to create the migration table for queues and run it. $ php artisan queue:table $ php artisan migrate You should now be able to use the async driver in config/queue.php. Use the same config a...
Post a Comment
Read more

Laravel working with Queues

What are queues in web development? Queues allow you to defer/postpone the processing of a time consuming task, such as sending an e-mail, until a later time, thus drastically speeding up the web requests to your application, which returns a response and serves the client significantly faster than it would be if the task ran synchronously. The Laravel Queue component provides a unified API across a variety of different queue services. There are different queue services. Some of them are hosted elsewhere, but some of them can be self-hosted, such as Beanstalkd, which I'll cover here. How do they work behind the scenes? Once you push a job onto the queue (from somewhere within your code, e.g. send an email after user has registered), all that the client has to wait for is for job to be pushed onto the queue service that is listening for jobs, and doesn't have to wait for the queue service to finish the job itself. The most trivial example would be a McDonalds employee ...
Post a Comment
Read more

The Coolest New Tech In 2018

The world of tech is always evolving, and each new year comes with all sorts of innovations and breakthroughs from some of the coolest and most prestigious companies in the world. This year is no different, and more information is starting to come out about some of the coolest gadgets releasing in 2018. All of this cool new technology is set to be released to consumers sometime this year, and the general excitement is already making waves online. Out of all of these cool new gadgets, which of these releases is building the most hype? The biggest names in tech are looking to dazzle consumers with the latest revolutionary technologies, but there are also some lesser known companies who are showcasing their newest products in order to make a name for themselves. It's up to the people to decide what new technologies are going to take 2018 by storm and which ones will ultimately be forgotten. This Reverse Microwave Can Quick-Freeze Food And Drinks ...
Post a Comment
Read more