Как сделать ajax множественным автозаполнением формы в laravel - PullRequest
Новая
       1

Как сделать ajax множественным автозаполнением формы в laravel

0 голосов
/ 08 июля 2019

Итак, я уже сделал автозаполнение формы, которая извлекает столбец (имя) в varchar из конкретной базы данных и таблицы и показывает его в представлении, но я не знаю, как сделать форму, чтобы показать значение другого столбца ( харга) в INT из той же таблицы, как только щелкнул первый столбец, я новичок в 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');

если спросить не так уж много, может кто-нибудь также показать мне, как суммировать все значения харги из каждой части ...

1 Ответ

0 голосов
/ 09 июля 2019

Вы можете использовать библиотеку select2, это облегчит вам задачу. Вам просто нужно вернуть ответ json с параметрами в каждой строке ['id'=>id,'name => name] `

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...