Question

所以我试图制作一个包含多个字段的表单，并且每个字段都有一个自动完成功能，该功能是从数据库中的一个表中获取的，但是每个字段都有一个不同的自动完成功能建议，因为它来自不同的表。

我正在遵循一个教程，该教程仅向我展示了如何从单个表中创建单个自动完成字段。但是当我尝试创建第二个字段时它卡住了，它显示了来自另一个表的数据，但是当我单击它时，它自动选择了对另一个字段的相同建议，而当我尝试更改另一个字段时我又选择了另一个建议会自动填充相同的值

这是我的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('name', 'LIKE', "%{$query}%")
        ->get();
      $output = '<ul class="dropdown-menu" style="display:block; position:relative">';
      foreach($data as $row)
      {
       $output .= '
       <li><a href="#">'.$row->name.'</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;
     }
    }

}

这是我的观点

@extends('layouts.master')
@section('content')
    <!-- Page top section -->
    <section class="page-top-section set-bg" data-setbg="../public/asset/img/page-top-bg/2.jpg">
        <div class="page-info">
            <h2>Spesifikasi Sistem</h2>
            <div class="site-breadcrumb">
                <a href="">Tentang</a>  /
                <span>Spesifikasi Sistem</span>
            </div>
        </div>
    </section>
    <!-- Page top end-->
<!DOCTYPE html>
<html>
 <head>
  <title>Ajax Autocomplete Textbox in Laravel using JQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <section class="contact-page">
        <div class="container">  
            <div class="form-group">
                <label style="color: white">CPU :</label>
                <input type="text" name="name" id="name" 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 CPU" />
                <div id="vgaList"></div>
            </div>
            {{ csrf_field() }}
        </div>
    </section>


<script>
$(document).ready(function(){

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


    $(document).on('click', 'li', function(){  
        $('#name').val($(this).text());  
        $('#cpuList').fadeOut();  
        $('#namevga').val($(this).text());  
        $('#vgaList').fadeOut();  

    });  

});
</script>

@endsection

这是我的路线

Route::get('/autocomplete','AutocompleteController@index');
Route::post('/autocomplete/fetchcpu','AutocompleteController@fetchcpu')->name('autocomplete.fetchcpu');
Route::post('/autocomplete/fetchvga','AutocompleteController@fetchvga')->name('autocomplete.fetchvga');

Laravel如何从两个不同的表格制作多个自动完成表格？

0 个答案: