如何在Laravel 5.7中將多個數據庫數據傳遞到jQuery的自動完成（AJAX）中

Question

我正在使用jQuery的自動完成功能來在用戶輸入時獲取數據。 有用; 我得到一些與用戶輸入匹配的郵政編碼 。

事實是， 我想傳遞的不僅僅是郵政編碼，例如與該郵政編碼相關聯的鄰居。 兩者都在同一張桌子上 。

我想在自動完成中傳遞郵政編碼和附近地區。

控制器 ：

<?php

namespace Grupo_Villanueva\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Response;

class SearchController extends Controller
{
    public function buscarCp(Request $request)
    {

        $term = $request->input('term');

        $results = [];

        $queries = DB::connection('db_postalcodes')
            ->table('postal_code')
            ->where('postal_code', 'LIKE', '%' . $term . '%') //search 'postal_code' column
            ->take(10)
            ->get(); // get 5 results

        foreach ($queries as $query) {
            $results[] = [
                'postal_code' => $query->postal_code,
                'value' => $query->postal_code,
                'colonia' => $query->neighborhood];
        }

        return Response::json($results);
    }
}

我考慮過使用關聯數組中的colonia獲取它，盡管我不是專家。

JS：

@if (Request::is('admin/posts/create'))
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> --}}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $('.postalCode').autocomplete({
        source: "{{ route('busqueda-cp') }}",
        minLength: 3,
        select: function (event, ui) {
            $('#postalCode').val(ui.item.value);
        }
    });
</script>
@else
<!-- No se cargó select2-->
@endif

路線：

// Aquí se guarda la función que hace, vía ajax, búsqueda de código postal.
Route::get('/buscarCp', 'SearchController@buscarCp')->name('busqueda-cp');

Answer 1

您可以使用將字符串串聯在一起. 字符串之間。 在$results變量中：

'value' => $query->postal_code . ' ' . $query->neighborhood,

您可以通過以下方式將任意數量的字符串連接在一起：

$query->postal_code . ' ' . $query->neighborhood . ' (' . $query->foo . ') ' . $query->bar

Answer 2

如果你想從PHP保持數組值，你可以使用自動完成的_renderItem所看到的方法在這里 。

因此，您的代碼如下所示：

$('.postalCode').autocomplete({
    source: "{{ route('busqueda-cp') }}",
    minLength: 3,
    select: function (event, ui) {
        $('#postalCode').val(ui.item.value);
    }
}).autocomplete( "instance" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append( item.postal_code + " " + item.colonia )
    .appendTo( ul );
};

然后，您可以使用該值，而只需更改選擇項的外觀即可。