Laravel 5 自动完成 Jquery

Question

我的项目有问题。 我想要一个从数据库中获取数据的自动完成输入，所以当我进入自动完成输入所在的视图时问题就开始了。该视图只给我一个白色屏幕，其中包含一个数组，其中包含我的“客户”表中的所有值（自动完成输入的值取自该表）。 我认为问题可能出在我的路线上，但我不知道该怎么办。

路线：

Route::get('/nuevaVenta', 'ventas@index');
Route::get('/nuevaVenta', 'ventas@autocomplete');

控制器（ventas.php）：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use App\Cliente;
use Illuminate\Support\Facades\Input;

class ventas extends Controller
{
    public function index(){
        return view('/nuevaVenta');
    }

    public function autocomplete(Request $Request){

        $term = Input::get('term');
        $results = array();
        $queries = Cliente::where('nombre', 'LIKE', '%'.$term.'%')
            ->orWhere('apellido_paterno', 'LIKE', '%'.$term.'%')
            ->take(10)->get();

        foreach ($queries as $query)
        {
            $results[] = [ 'id' => $query->id, 'value' => $query->nombre.' '.$query->apellido_paterno.' '.$query->apellido_materno];
        }
        return response()->json($results);
        //\Response::json($results); 
    } 
}

查看（nuevaVenta.blade.php）：

@extends('master')
@section('contenido')
<script src="{{asset("js/validaciones.js")}}"></script>
<script src="{{asset("js/nuevaVenta.js")}}"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<form class="form-horizontal" action="{{url('/nuevaVenta')}}" method="GET">
    <input type="hidden" name="_token" value="{{csrf_token()}}">
    <br>
    <div class="form-control" style="background-color: lightblue"><label>Registro de Ventas</label></div>
    <div class="col-xs-12" style="border:1px solid lightblue">
        <div class="form-group">
            <label class="control-label col-sm-12" style ="color: #4cae4c">Clave:0001</label>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-1" style ="font-weight: normal">Cliente:</span></label>
            <div class="col-sm-10">
                <input type="text" name="cliente" class="form-control solo-letras" id="cliente" style="width: 40%;" placeholder="Buscar cliente..." required>
            </div>
        </div>
        <hr>
        <div class="form-group">
            <label class="control-label col-sm-1" style ="font-weight: normal">Artículo:</label>
            <div class="col-sm-10">
                <input type="text" name="cliente" class="form-control" style="width: 40%; display: inline;" placeholder="Buscar Artículo..." required>
                <a href="#" style="display: inline"><span class="glyphicon glyphicon-plus btn btn-primary"></span></a>
            </div>
        </div>
        <hr>
        <div class="col-xs-12">
            <table class="table">
              <thead class="thead-inverse">
                <tr>
                  <th>Descripción Artículo</th>
                  <th>Modelo</th>
                  <th>Cantidad</th>
                  <th>Precio</th>
                  <th>Importe</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td></td>
                </tr>
              </tbody>
            </table>
        </div>
    </div>
</form>
@stop

js 文件（ventas.js）：

$(document).ready(function(){
    $('#cliente').autocomplete({
        autoFocus: true,
        minLength:3,
        dataType: "json",
        source:'ventas/autocomplete',
        select:function(event, ui){
            alert(ui);
        }   
    });

});

我正在使用 jquery-ui 库中的自动完成小部件

Answer 1

您的路线似乎重复，这就是为什么，所以使用独特的路线，

Route::get('/nuevaVenta', 'ventas@index');
Route::get('/nuevaVentaAutocomplete', 'ventas@autocomplete');