我已经设法通过typeahead搜索教程获取自动填充数据,我改变了现在通过三列而不是一列进行搜索的方式。所以,当我开始输入搜索字段自动完成显示时:
街道从 - 到
并基于此我应该显示该ID的其他数据(该行的ID但不显示ID)。
你可以在我的控制器中看到它的外观:
public function ajaxData(Request $request)
{
$query = $request->get('query', '');
$streets = Street::select('id', 'name')
->where('name', 'LIKE', '%'.$query.'%')
->get();
$results = array();
foreach($streets as $sn) {
$street_numbers = StreetNumber::select('from', 'to')
->where('town_id', Auth::user()->town_id)
->where('street_id', $sn->id)
->get();
foreach($street_numbers as $st) {
$data = array(
'name' => $sn->name." ".$st->from."-".$st->to
);
$results[] = $data;
}
}
return response()->json($results);
}
在视图中我应该从自动完成中选择,当我点击提交时,它应该显示像城镇,居住等等的数据......
但是,如果我尝试使用$ street_numbers变量,它会显示错误: (2/2)ErrorException 未定义的变量:street_numbers
在字段旁边的视图中,我从类型教程中获得了JQuery:
{!! Form::open(['route'=>'add.index', 'method'=>'GET']) !!}
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Search</div>
<div class="panel-body">
<div class="input-group">
{!! Form::text('search_text', null, array('placeholder' => 'Street from - to','class' => 'form-control','id'=>'search_text')) !!}
<span class="input-group-btn">
{!! Form::button('<i class="fa fa-search"></i>', ['type' => 'submit', 'class'=>'btn btn-default']) !!}
</span>
</div>
</div>
</div>
</div>
{!! Form::close() !!}
<script type="text/javascript">
var url = "{{ route('autocomplete.ajax') }}";
$('#search_text').typeahead({
source: function (query, process) {
return $.get(url, { query: query }, function (data) {
return process(data);
});
}
});
</script>
我非常坚持这个,不知道如何从这里开始,因为在JS或JQuery我是初学者。
在ajaxData()函数之前我有index()函数,我有:
return view('members.index', compact('towns', 'user', 'activist', 'capillary'));
所以有我的观点。
我正在尝试在视图中使用$ street_numbers变量:
<div class="col-sm-6">
<div class="form-group">
{!! Form::label('', 'Settlement') !!}
{!! Form::select('', [$street_numbers? $street_numbers->settlement->name : null => $street_numbers? $street_numbers->settlement->name : null], null, ['class'=>'form-control', 'readonly']) !!}
</div>
</div>
答案 0 :(得分:0)
我成功了,如果有人需要,我想和别人分享:
在提交按钮中,我放置了'id'=&gt;'get_cust_data',然后我制作了单独的.js文件,我在提交时从自动填充搜索字段中提取信息。
JS:
$(document).ready(function(){
$('#get_cust_data').click(function(){
var st = $.trim($("#search_text").val());
get_cust_data(st);
});
});
在控制器中我获得具有爆炸功能的数据,因为正如我在第一篇文章中所说的那样,我从数据库到街道,而不仅仅是一个数据。在进一步的代码中,您将看到我如何从街道获取ID,然后使用对象从同一行获取其他信息,例如settlement,electorUnit等......
public function get_cust_data(Request $reques)
{
$arr = explode("-", $reques->st);
$street = $arr[0];
$from = $arr[1];
$to = $arr[2];
// Street ID
$street_id = Street::select('id')
->where('name', $street)
->first()->id;
// Object
$street_data = StreetNumber::select('*')
->where('street_id',$street_id)
->where('from', $from)
->where('to', $to)
->get();
$result = array();
// Settlement ID
$settlement_id = $street_data[0]->settlement_id;
$result['settlement_id'] = $settlement_id;
// Settlement Name
$settl_data = Settlement::select('name')
->where('id',$settlement_id)
->get();
// ElectoralUnit ID
$electoral_unit_id = $street_data[0]->electoral_unit_id;
$result['electoral_unit_id'] = $electoral_unit_id;
// ElectoralUnit Name
$el_unit_data = ElectoralUnit::select('name')
->where('id',$electoral_unit_id)
->get();
// ElectoralUnitNumber
$el_unit_number_data = ElectoralUnit::select('electoral_unit_number')
->where('id',$electoral_unit_id)
->get();
$result['s_name'] = $settl_data[0]->name;
$result['e_name'] = $el_unit_data[0]->name;
$result['e_n_name'] = $el_unit_number_data[0]->electoral_unit_number;
$result['street'] = $street;
$result['str_id'] = $street_id;
return response()->json(json_encode($result));
}
然后在sam JS文件中,它在标题中连接到视图,我放了另一个我用Google搜索的函数,无法完全解释它是如何工作的,但是该函数从控制器转发变量到视图的字段ID-s之类的这样:
function get_cust_data(street_data){
var method_url= "/get_cust_data";
$.ajax({
type: "POST",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: method_url,
cache: false,
data:{ st:street_data},
async: true,
success: function(response){
var data = JSON.parse(response);
// console.log(data.id);
$('#street').append("<option value='"+data.street+"'>"+data.street+"</option>");
$('#settlement_id').append("<option value="+data.settlement_id+">"+data.s_name+"</option>");
$('#electoral_unit').append("<option value='"+data.e_name+"'>"+data.e_name+"</option>");
$('#electoral_unit_number').append("<option value="+data.electoral_unit_id+">"+data.e_n_name+"</option>");
// console.log(data.message);
}, error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}
我希望至少我会解释一下,并会帮助别人。干杯!