Laravel& JQuery:如果设置了ID,则显示mysql行数据

时间:2017-12-08 00:46:43

标签: javascript jquery mysql laravel autocomplete

我已经设法通过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> 

1 个答案:

答案 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);
      }

    });
}

我希望至少我会解释一下,并会帮助别人。干杯!