Autocomplete Form using Ajax in laravel

Question

I trying to autofill my form but everything is okay data return from my database table but my form does not fill auto please suggest me what will I do now.I am uploading all my code.This is form and js code

<div class="col-md-7">
    <div class="form-group">
        {{Form::label('reg_id','Student Registration Number')}}
        {!! Form::text('reg_id', null, array('id'=>'reg_id','placeholder' => 'Enter Student Registration Number','class' => 'form-control')) !!}
    </div>
    <div class="form-group">
        {{Form::label('Name','Student Name')}}
        {!! Form::text('name', null, array('id'=>'name','placeholder' => 'Enter Student Name','class' => 'form-control')) !!}
    </div>
    <div class="form-group">
        {{Form::label('Email','Student Email')}}
        {!! Form::email('email', null, array('id'=>'email','placeholder' => 'Enter Student Email','class' => 'form-control')) !!}
    </div>

    <div class="form-group">
        {{Form::label('Department','Department ')}}
        {{csrf_field()}}
        <select name="department" class="form-control" id=>'department_id'>
            <option value=" ">----Select Department-----</option>
            {{--@foreach($department as $value)
            <option value="{{$value->id}}">{{$value->name}}</option>
            @endforeach--}}
        </select>
    </div>
</div>

//jQuery code

$('#reg_id').autocomplete({
    source : '{!!URL::route('autocomplete')!!}',
    minlenght:3,
    autoFocus:true,
    select:function(event,ui){
        $('#reg_id').val(ui.item.value);
    }
});

//Here is the controller code:

public function autocomplete(Request $request)
{
    $term=$request->term;
    $data = Student::where('reg_id','LIKE','%'.$term.'%')->with('department')
        ->take(10)
        ->get();
    $result=array();
    foreach ($data as $key => $v){
        $result[]=['reg_id' =>$v->reg_id,'name'=>$v->name,'email'=>$v->email,'department_id'=>$v->department_id];
    }
    return response()->json($result);
}

//And Route code also:

Route::get("/autocomplete",array('as'=>'autocomplete','uses'=> 'EnrollCourseController@autocomplete'));

First of all autocomplete and autofill the form are two different things, so what is not working at your end ? — Mayank Pandeyz
– Mayank Pandeyz, Commented Jan 3, 2018 at 5:58
I want to autocomplete.In my route file, all data returned from the database but the problem is it's not autocompleted automatically. — KaziBablu
– KaziBablu, Commented Jan 3, 2018 at 6:04
i don't know about laravel but i can give you the functionality what you needed for this.. Can I...? — Gyandeep Sharma
– Gyandeep Sharma, Commented Jan 3, 2018 at 6:32

Gyandeep Sharma · Accepted Answer · 2018-01-03 06:47:41Z

Look I'm giving here the functionality here only.

Please Implement this in your project...

HTML

<link href="https://cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7">
    <div class="form-group">
        <label for='reg_id'>Student Registration Number</label>
        <input type="text" id='reg_id' placeholder = 'Enter Student Registration Number' class = 'form-control' />
    </div>
    <div class="form-group">
        <label for='Name'>Student Name</label>
        <input type="text" id='Name' placeholder = 'Enter Student Name' class = 'form-control' />
    </div>
    <div class="form-group">
        <label for='Email'>Student Email</label>
        <input type="email" id='Email' placeholder = 'Enter Student Email' class = 'form-control' />
    </div>
    <div class="form-group">
        <label for='Department'>Department</label>
        <select name="department" class="form-control" id='department_id'>
            <option value=" ">----Select Department-----</option>
            <option value="1">Department 1</option>
            <option value="2">Department 2</option>
            <option value="3">Department 3</option>
            <option value="4">Department 4</option>
            <option value="5">Department 5</option>
            <option value="6">Department 6</option>
        </select>
    </div>
    <p id="error" style="color:red;"></p>
</div>

jQuery

The focusout() function works when you enter the reg_id and focused out. Go to the submit.php page by AJAX where you use the mysql for fetching data.

<script>
    $('#reg_id').focusout(function(e) { 
        var reg_id = $(this).val();
        $.ajax({
            url     : 'submit.php',
            type    : 'POST',
            data    : {'reg_id':reg_id},
            timeout : 30000,
            success : function(e) {
                if(e==0){ //Show error if data not found.
                    $('#error').html('Data not found');
                    $('#Name').val('');
                    $('#Email').val('');
                    $('#department_id').val(' ');
                }
                else {assign value to each input by json
                    $('#error').html('');
                    r = $.parseJSON(e); //convert json to array
                    $('#Name').val(r.name); //assign name value
                    $('#Email').val(r.email); //assign email value
                    $('#department_id').val(r.department); //assign department value
                }
            }               
        });
    });   
</script>

submit.php

Suppose the below array is the database table

<?php 
    $array = array(
        array(
            'reg_id' => '1100',
            'name' => 'AB',
            'email' => '[email protected]',
            'department' => 1,
        ),
        array(
            'reg_id' => '1102',
            'name' => 'BC',
            'email' => '[email protected]',
            'department' => 4,
        ),
        array(
            'reg_id' => '1103',
            'name' => 'CD',
            'email' => '[email protected]',
            'department' => 3,
        ),
        array(
            'reg_id' => '1104',
            'name' => 'DE',
            'email' => '[email protected]',
            'department' => 5
        ),
        array(
            'reg_id' => '1105',
            'name' => 'EF',
            'email' => '[email protected]',
            'department' => 3,
        )
    );

foreach is as select query by which you get only single row from database.

    foreach($array as $r){
        if($_POST['reg_id']==$r['reg_id']) {
            echo json_encode($r);die; // return the json of values

        }
    }
    echo 0; die;
?>

Collectives™ on Stack Overflow

Autocomplete Form using Ajax in laravel

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related