Laravel 和 JQuery：如果设置了 ID，则显示 mysql 行数据

Question

我已经设法通过 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) 错误异常 未定义变量：street_numbers

在字段旁边的视图中，我有来自 typeahed 教程的 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> 

Answer 1

我成功了，我想与他人分享以防有人需要：

在提交按钮中，我放置了 'id'=>'get_cust_data'，然后我创建了单独的 .js 文件，我在提交时从自动完成搜索字段中提取信息。

JS：

$(document).ready(function(){
  $('#get_cust_data').click(function(){
      var st = $.trim($("#search_text").val());
      get_cust_data(st);
  });
});

在控制器中，我使用爆炸功能获取数据，因为正如我在第一篇文章中所说，我有来自数据库的街道，而不仅仅是一个数据。在进一步的代码中，您将看到我如何从街道获取 ID，然后使用对象从同一行获取其他信息，如结算、选举人单位等......

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 文件中，我放置了另一个我用谷歌搜索的函数，无法完全解释它是如何工作的，但是该函数通过视图将变量从控制器转发到带有字段 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);
      }

    });
}

我希望至少我解释了一点，并会帮助别人。干杯！