javascript - 在 laravel 中使用 Ajax 自动完成表单

Question

我尝试自动填写我的表格，但一切正常，数据从我的数据库表返回，但我的表格没有自动填写，请告诉我我现在要做什么。我正在上传我所有的代码。这是表格和 js 代码

<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'));

Answer 1

看，我只在这里提供了功能。

请在你的项目中实现这个...

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

focusout() 函数在您输入 reg_id 并聚焦时起作用。通过 AJAX 转到 submit.php 页面，您在其中使用 mysql 获取数据。

<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

假设下面的数组是数据库表

<?php 
    $array = array(
        array(
            'reg_id' => '1100',
            'name' => 'AB',
            'email' => 'ab@gmail.com',
            'department' => 1,
        ),
        array(
            'reg_id' => '1102',
            'name' => 'BC',
            'email' => 'bc@gmail.com',
            'department' => 4,
        ),
        array(
            'reg_id' => '1103',
            'name' => 'CD',
            'email' => 'cd@gmail.com',
            'department' => 3,
        ),
        array(
            'reg_id' => '1104',
            'name' => 'DE',
            'email' => 'de@gmail.com',
            'department' => 5
        ),
        array(
            'reg_id' => '1105',
            'name' => 'EF',
            'email' => 'ef@gmail.com',
            'department' => 3,
        )
    );

foreach 是一种选择查询，通过它您只能从数据库中获取单行数据。

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

        }
    }
    echo 0; die;
?>