Myujth

I'm populating a select box with data from a database. The thing is that there are 139659 elements inside it (just getting from a single column).

I tried it once and I guess all the data got loaded, and of course my application got slow loading all that stuff.

So, how could I optimize the data fetch from it? I will use select2 to get more functionalities, though I think I first need to address how to load the data.

My code:

<div id="inputs-postal">
 <div class="form-group">
 <select name="codigoPostal" id="select-cp">
 @foreach ($cpostales as $cp)
 <option value=" $cp->postal_code "> $cp->postal_code </option>
 @endforeach
 </select>
 </div>
</div>

Controller:

public function create()


// Toma los estados de la base de datos.

$estados = DB::connection('db_postalcodes')
 ->table('state')
 ->groupBy('state')
 ->get();
$cpostales = DB::connection('db_postalcodes')
 ->table('postal_code')
 ->get(); 

// El with hace que se adjunten variables al view.
return view('admin.posts.create')->with('estados', $estados)->with('cpostales', $cpostales);

One option if you don't mind using jQuery UI is to use jQuery autocomplete with a text field, instead of a drop-down. Here's some working code I used.

In your controller, create a function that returns a small number of postal codes:

<?php

use Response;

...


public function searchPostalCode(Request $request)

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

 $results = ;

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

 foreach ($queries as $query) 
 $results = ['id' => $query->id, 'value' => $query->name];
 

 return Response::json($results);

Define a route for it, in Laravel's web routes

Route::get('/searchPostalCode', 'PostalCodeController@searchPostalCode');

Then, in your blade template, add this Snippet

<input id="postal-code" type="text" name="postal-code">

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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 type="text/javascript">

<!--
 $( "#postal-code" ).autocomplete(
 source: "URL('/searchPostalCode')",
 minLength: 3,
 select: function(event, ui) 
 $('#postal-code').val(ui.item.value);
 
 );
//-->
</script>