Laravel Autocomplete Textbox with Multiple values using jQuery and MySQL

Laravel Autocomplete Textbox with Multiple values using jQuery and MySQL

In this Post We Will Explain About is Laravel Autocomplete Textbox with Multiple values using jQuery and MySQL With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Laravel – Input multiple tags with dynamic autocomplete Example

In this post we will show you Best way to implement Laravel – Autocomplete Multiple Fields, hear for Laravel 5 – Simple Autocomplete Multiple values Using jQuery, Ajax and MySQL with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Step 1: Make Sample Table

In first Phase, We will create some sample table Like as a “students” to test this spource code.

CREATE TABLE `students` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `stud_sname` 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 Simple Phase, We will add the simple following two Laravel routes :

Also Read :   Ajax PHP MySQL Creating Autocomplete Search Suggestion

Route::get('autocomplete', 'studentNameListController@index');

Route::get('searchajax', ['as'=>'searchajax','uses'=>'studentNameListController@searchResponse']);

Step 3: Create Controller

In this Phase, We will Make studentNameListController.php in following path Laravel web-application like as a app/Http/Controllers.

app/Http/Controllers/studentNameListController.php

<?php

//include Name Space
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class studentNameListController extends Controller
{
    public function index(){        
        return view('autocomplete');
    }
    public function searchResponse(Request $request){
        $query = $request->get('term','');
        $students=\DB::table('students');
        if($request->type=='studentname'){
            $students->where('name','LIKE','%'.$query.'%');
        }
        if($request->type=='student_code'){
            $students->where('stud_sname','LIKE','%'.$query.'%');
        }
           $students=$students->get();        
        $data=array();
        foreach ($students as $student) {
                $data[]=array('name'=>$student->name,'stud_sname'=>$student->stud_sname);
        }
        if(count($data))
             return $data;
        else
            return ['name'=>'','stud_sname'=>''];
    }
}

Step 4: Create View File

Last Phase We will make a simple file like as a autocomplete.blade.php in following path Laravel web-application resources/views/.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Autocomplete Textbox with Mutiple values using jQuery and MySQL</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="1.12.1/jquery-ui.min.css">
    <script src="jquery-3.2.1.min.js"></script>
  <script src="1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<!-- Devloped by live24u.com free download examples -->
<div class="container">
  <h1>Laravel Autocomplete Textbox with Mutiple values using jQuery and MySQL</h1>
  {!! Form::open() !!}
<!-- Devloped by live24u.com free download examples -->      
    <table class="table table-bordered">
      <tr>
          <th><input class='check_all' type='checkbox' onclick="all_student()"/></th>
          <th>S. No</th>
          <th>Student Name</th>
          <th>Student code</th>
      </tr>
      <tr>
          <td><input type='checkbox' class='chkbox'/></td>
          <td><span id='sn'>1.</span></td>
          <td><input class="form-control liveAuto_txt" type='text' data-type="studentname" id='studentname_1' name='studentname[]'/></td>
          <td><input class="form-control liveAuto_txt" type='text' data-type="student_code" id='student_code_1' name='student_code[]'/> </td>
        </tr>
      </table>
      <button type="button" class='btn btn-danger delete'>- Delete</button>
      <button type="button" class='btn btn-success addbtn'>+ Add More</button>
  {!! Form::close() !!}
</div>
<script type="text/javascript">
          
 $(".delete").on('click', function() {
  $('.chkbox:checkbox:checked').parents("tr").remove();
  $('.check_all').prop("checked", false); 
  studentUpdateId();
});
var i=$('table tr').length;
$(".addbtn").on('click',function(){
  count=$('table tr').length;
  
    var data="<tr><td><input type='checkbox' class='chkbox'/></td>";
      data+="<td><span id='sn"+i+"'>"+count+".</span></td>";
      data+="<td><input class='form-control liveAuto_txt' type='text' data-type='studentname' id='studentname_"+i+"' name='studentname[]'/></td>";
      data+="<td><input class='form-control liveAuto_txt' type='text' data-type='student_code' id='student_code_"+i+"' name='student_code[]'/></td></tr>";
  $('table').append(data);
  i++;
});
        
function all_student() {
  $('input[class=chkbox]:checkbox').each(function(){ 
    if($('input[class=check_all]:checkbox:checked').length == 0){ 
      $(this).prop("checked", false); 
    } else {
      $(this).prop("checked", true); 
    } 
  });
}
function studentUpdateId(){
  obj=$('table tr').find('span');
  $.each( obj, function( key, value ) {
    id=value.id;
    $('#'+id).html(key+1);
  });
}
//Live autocomplete script
$(document).on('focus','.liveAuto_txt',function(){
  type = $(this).data('type');
  
  if(type =='studentname' )autoType='name'; 
  if(type =='student_code' )autoType='stud_sname'; 
  
   $(this).autocomplete({
       minLength: 0,
       source: function( request, response ) {
            $.ajax({
                url: "{{ route('searchajax') }}",
                dataType: "json",
                data: {
                    term : request.term,
                    type : type,
                },
                success: function(data) {
                    var array = $.map(data, function (stud) {
                       return {
                           label: stud[autoType],
                           value: stud[autoType],
                           data : stud
                       }
                   });
                    response(array)
                }
            });
       },
       select: function( event, ui ) {
           var data = ui.stud.data;           
           id_arr = $(this).attr('id');
           id = id_arr.split("_");
           paramId = id[id.length-1];
           $('#studentname_'+paramId).val(data.name);
           $('#student_code_'+paramId).val(data.stud_sname);
       }
   });
   
   
});
</script>
<!-- Devloped by live24u.com free download examples -->
</body>
</html>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Also Read :   Search Comma Separated values using Laravel Query FIND_IN_SET





Example

I hope you have Got What is Laravel autocomplete multiple fields with single auto-select request And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.