Question

所以我已经制作了一个自动完成的表单，该表单从特定的数据库和表中获取varchar中的一列（名称），并在视图中显示它，但是我不知道如何制作该表单以显示另一列的值（单击第一列后，从同一个表中的INT中获取harga），我是javascript的新手，所以我真的很感激有人可以为此提供帮助

这是我的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;
     }
    }

}

这是我的看法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>

这是我的路线

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

如果问的不是太多，谁能告诉我如何汇总各个部分的所有harga值...

Answer 1

您可以使用select2库，它将使您更轻松。您只需返回每行['id'=>id,'name => name]`

中带有参数的响应json

如何在Laravel中制作Ajax多个自动完成表格

1 个答案: