So i already made an autocomplete form that fetch a column(name) in varchar from specific database and table and show it in the view, but i don't know how to make the form to show the value of another column(harga) in INT from the same table once the first column is clicked, i am new to javascript so i really apreciate if someone could help me on this
So this is my AutocompleteController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
class AutocompleteController extends Controller
{
//for create controller - php artisan make:controller AutocompleteController
function index()
{
return view('autocomplete');
}
function fetchcpu(Request $request)
{
if($request->get('query'))
{
$query = $request->get('query');
$data = DB::table('cpu')
->where('namecpu', 'LIKE', "%{$query}%")
->get();
$output = '<ul class="dropdown-menu" style="display:block; position:relative">';
foreach($data as $row)
{
$output .= '
<li><a href="#">'.$row->namecpu.'</a></li>
';
}
$output .= '</ul>';
echo $output;
}
}
function fetchvga(Request $request)
{
if($request->get('query'))
{
$query = $request->get('query');
$data = DB::table('vga')
->where('namevga', 'LIKE', "%{$query}%")
->get();
$output = '<ul class="dropdown-menu" style="display:block; position:relative">';
foreach($data as $row)
{
$output .= '
<li><a href="#">'.$row->namevga.'</a></li>
';
}
$output .= '</ul>';
echo $output;
}
}
function fetchmtb(Request $request)
{
if($request->get('query'))
{
$query = $request->get('query');
$data = DB::table('motherboard')
->where('namemtb', 'LIKE', "%{$query}%")
->get();
$output = '<ul class="dropdown-menu" style="display:block; position:relative">';
foreach($data as $row)
{
$output .= '
<li><a href="#">'.$row->namemtb.'</a></li>
';
}
$output .= '</ul>';
echo $output;
}
}
function fetchsto(Request $request)
{
if($request->get('query'))
{
$query = $request->get('query');
$data = DB::table('storage')
->where('namesto', 'LIKE', "%{$query}%")
->get();
$output = '<ul class="dropdown-menu" style="display:block; position:relative">';
foreach($data as $row)
{
$output .= '
<li><a href="#">'.$row->namesto.'</a></li>
';
}
$output .= '</ul>';
echo $output;
}
}
function fetchmem(Request $request)
{
if($request->get('query'))
{
$query = $request->get('query');
$data = DB::table('memory')
->where('namemem', 'LIKE', "%{$query}%")
->get();
$output = '<ul class="dropdown-menu" style="display:block; position:relative">';
foreach($data as $row)
{
$output .= '
<li><a href="#">'.$row->namemem.'</a></li>
';
}
$output .= '</ul>';
echo $output;
}
}
}
this is my view autocomplete.blade.php
<div class="container">
<form method="POST">
<div class="col-md-6 form-group">
<label style="color: white">CPU :</label>
<input type="text" name="namecpu" id="namecpu" class="form-control input-lg" placeholder="Masukan Tipe CPU" />
<div id="cpuList"></div>
<label style="color: white">VGA :</label>
<input type="text" name="namevga" id="namevga" class="form-control input-lg" placeholder="Masukan Tipe VGA" />
<div id="vgaList"></div>
<label style="color: white">Motherboard :</label>
<input type="text" name="namemtb" id="namemtb" class="form-control input-lg" placeholder="Masukan Tipe Motherboard" />
<div id="mtbList"></div>
<label style="color: white">Storage :</label>
<input type="text" name="namesto" id="namesto" class="form-control input-lg" placeholder="Masukan Tipe Storage" />
<div id="stoList"></div>
<label style="color: white">Memory :</label>
<input type="text" name="namemem" id="namemem" class="form-control input-lg" placeholder="Masukan Tipe Memory" />
<div id="memList"></div>
<br>
<button class="pull-center site-btn" type="submit" >CEK KOMPATIBILITAS<img src="../public/asset/img/icons/double-arrow.png" alt="#"/></button>
</div>
</form>
{{ csrf_field() }}
</div>
</section>
<script>
$(document).ready(function(){
$('#namecpu').keyup(function(){
var query = $(this).val();
if(query != '')
{
var _token = $('input[name="_token"]').val();
$.ajax({
url:"{{ route('autocomplete.fetchcpu') }}",
method:"POST",
data:{query:query, _token:_token},
success:function(data){
$('#cpuList').fadeIn();
$('#cpuList').html(data);
}
});
}
});
$('#namevga').keyup(function(){
var query = $(this).val();
if(query != '')
{
var _token = $('input[name="_token"]').val();
$.ajax({
url:"{{ route('autocomplete.fetchvga') }}",
method:"POST",
data:{query:query, _token:_token},
success:function(data){
$('#vgaList').fadeIn();
$('#vgaList').html(data);
}
});
}
});
$('#namemtb').keyup(function(){
var query = $(this).val();
if(query != '')
{
var _token = $('input[name="_token"]').val();
$.ajax({
url:"{{ route('autocomplete.fetchmtb') }}",
method:"POST",
data:{query:query, _token:_token},
success:function(data){
$('#mtbList').fadeIn();
$('#mtbList').html(data);
}
});
}
});
$('#namesto').keyup(function(){
var query = $(this).val();
if(query != '')
{
var _token = $('input[name="_token"]').val();
$.ajax({
url:"{{ route('autocomplete.fetchsto') }}",
method:"POST",
data:{query:query, _token:_token},
success:function(data){
$('#stoList').fadeIn();
$('#stoList').html(data);
}
});
}
});
$('#namemem').keyup(function(){
var query = $(this).val();
if(query != '')
{
var _token = $('input[name="_token"]').val();
$.ajax({
url:"{{ route('autocomplete.fetchmem') }}",
method:"POST",
data:{query:query, _token:_token},
success:function(data){
$('#memList').fadeIn();
$('#memList').html(data);
}
});
}
});
$(document).on('click', '#cpuList li', function(){
$('#namecpu').val($(this).text());
$('#cpuList').fadeOut();
});
$(document).on('click', '#vgaList li', function(){
$('#namevga').val($(this).text());
$('#vgaList').fadeOut();
});
$(document).on('click', '#mtbList li', function(){
$('#namemtb').val($(this).text());
$('#mtbList').fadeOut();
});
$(document).on('click', '#stoList li', function(){
$('#namesto').val($(this).text());
$('#stoList').fadeOut();
});
$(document).on('click', '#memList li', function(){
$('#namemem').val($(this).text());
$('#memList').fadeOut();
});
});
</script>
and this is my routes
Route::get('/autocomplete','AutocompleteController@index');
Route::post('/autocomplete/fetchcpu','AutocompleteController@fetchcpu')->name('autocomplete.fetchcpu');
Route::post('/autocomplete/fetchvga','AutocompleteController@fetchvga')->name('autocomplete.fetchvga');
Route::post('/autocomplete/fetchmtb','AutocompleteController@fetchmtb')->name('autocomplete.fetchmtb');
Route::post('/autocomplete/fetchsto','AutocompleteController@fetchsto')->name('autocomplete.fetchsto');
Route::post('/autocomplete/fetchmem','AutocompleteController@fetchmem')->name('autocomplete.fetchmem');
if it's not too much to ask, can anyone also show me how to sum all the harga value from every parts...
You can use select2 library it will make it easy for you. You just need to return response json with parameters in each row ['id'=>id,'name=>name]`