我试图自动填充我的表单，但一切正常，数据从我的数据库表返回，但我的表单没有自动填充，请建议我现在该怎么做。我正在上传我的所有代码。这是表单和 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'));
最佳答案
看，我只在这里提供功能。
请在您的项目中实现此...
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
当您输入 reg_id 并聚焦时，focusout() 函数就会起作用。通过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>
提交.php
假设下面的数组是数据库表
<?php
$array = array(
array(
'reg_id' => '1100',
'name' => 'AB',
'email' => '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e38281a3848e828a8fcd808c8e" rel="noreferrer noopener nofollow">[email protected]</a>',
'department' => 1,
),
array(
'reg_id' => '1102',
'name' => 'BC',
'email' => '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b29280b2c262a222765282426" rel="noreferrer noopener nofollow">[email protected]</a>',
'department' => 4,
),
array(
'reg_id' => '1103',
'name' => 'CD',
'email' => '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4d4a6e49434f4742004d4143" rel="noreferrer noopener nofollow">[email protected]</a>',
'department' => 3,
),
array(
'reg_id' => '1104',
'name' => 'DE',
'email' => '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5a1a085a2a8a4aca9eba6aaa8" rel="noreferrer noopener nofollow">[email protected]</a>',
'department' => 5
),
array(
'reg_id' => '1105',
'name' => 'EF',
'email' => '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16737056717b777f7a3875797b" rel="noreferrer noopener nofollow">[email protected]</a>',
'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;
?>
关于javascript - 在 laravel 中使用 Ajax 自动完成表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48071919/