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