samedi 31 décembre 2016

Laravel 5 autocomplete Jquery

I have a problem with my project. I want an autocomplete input that gets the data from a database, so the problem starts when I enter the view where the autocomplete input is. The view only gives me a white screen with an array that contains all the values ​​in my "clientes" table (the values for the autocomplete input are taken from this table). I think the problem may be on my routes, but I do not know what to do.

Routes:

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

Controller (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); 
    } 
}

View (nuevaVenta.blade.php):

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

<form class="form-horizontal" action="" method="GET">
    <input type="hidden" name="_token" value="">
    <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 file (ventas.js):

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

});

I'm using the autocomplete widget from the jquery-ui library



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire