How to pass multiple DB data into jQuery's Autocomplete (AJAX) in Laravel 5.7

Question

I'm using jQuery's Autocomplete to get data while the user is typing. It works; I get some zipcode that matches the user's input.

The thing is that I want to pass more than the zipcode, like the neighborhood associated with that zipcode. Both are in the same table.

I want to pass the zipcode AND the neighborhood in the autocomplete.

Controller:

<?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);
    }
}

I thought about fetching it with the colonia inside the associative array, though I'm not an expert.

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

Route:

// 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');

Do you mean you want to append the neighborhood to the zip code? In your $results you can do this: 'value' => $query->postal_code . ' ' . $query->neighborhood, — newUserName02
– newUserName02, Commented Nov 20, 2018 at 2:09
@newUserName02 Works. Thanks. Questions: So could I append any number of data that way?. Also, answer the question so I can select you as the winner! — dawn
– dawn, Commented Nov 20, 2018 at 2:12

newUserName02 · Accepted Answer · 2018-11-20 02:18:57Z

1

You can concatenate strings together using . between strings. In your $results variable:

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

You can concatenate any number of strings together this way:

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

answered Nov 20, 2018 at 2:18

newUserName02

1,70814 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CUGreen · Accepted Answer · 2018-11-20 02:29:59Z

1

If you wanted to keep the array value from php you could use autocomplete's _renderItem method as seen here.

So your code would look like this:

$('.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 );
};

Then you could use the value and just change the way the select items look.

answered Nov 20, 2018 at 2:29

CUGreen

3,2042 gold badges17 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to pass multiple DB data into jQuery's Autocomplete (AJAX) in Laravel 5.7

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related