Jquery Autocomplete with Laravel 4 not working

Question

I'm using jquery autocomplete with Laravel 4.2.13. I'm trying to search a value in a form within a boostrap modal. I'm passing a get value and receving the response correctly, but the text input does not fill with the value. Here is my create.blade.php view

<!DOCTYPE html>
<html>
<head>
    <title>Crear Detalle</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="//codeorigin.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//codeorigin.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('css/main.css') }}" />
    <script type="text/javascript" src="{{ URL::asset('js/bootstrap.min.js') }}" ></script>

</head>

<body>

<div class="container">

<nav class="navbar navbar-inverse">
    <div class="navbar-header">
        <a class="navbar-brand" href="{{ URL::to('nota_detalle') }}">Panel de Detalles de Ordenes</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a href="{{ URL::to('nota_detalle') }}">Ver todos los Detalles</a></li>
        <li><a href="{{ URL::to('nota_detalle/create') }}">Crear un Detalle</a>
    </ul>
</nav>


<h1>Crear Detalle</h1>

<!-- if there are creation errors, they will show here -->
{{ HTML::ul($errors->all() )}}

{{ Form::open(array('url' => 'nota_detalle', 'class' => '')) }}

    <table>
        <tr>
            <td class="ancho">
                <div class="form-group">
                    {{ Form::label('codigo_nota', 'Codigo Orden') }}
                    {{ Form::text('codigo_nota', Input::old('codigo_nota'), array('class' => 'form-control')) }}
                </div>
            </td>
            <td class="ancho">
                <a href="#" class="btn btn-default"
                   data-toggle="modal"
                   data-target="#modalCliente">Buscar</a>
            </td>
        </tr>
        <tr>
            <td class="ancho">
                <div class="form-group">
                    {{ Form::label('cantidad_detalle', 'Cantidad') }}
                    {{ Form::text('cantidad_detalle', Input::old('cantidad_detalle'), array('class' => 'form-control')) }}
                </div>
            </td>

        </tr>
        <tr>
            <td class="ancho">
                <div class="form-group">
                    {{ Form::label('descripcion_detalle', 'Descripción') }}
                    {{ Form::textarea('descripcion_detalle', Input::old('descripcion_detalle'), array('class' => 'form-control')) }}
                </div>
            </td>
        </tr>
        <tr>
            <td class="ancho">
                <div class="form-group">
                    {{ Form::label('precioIVA_detalle', 'Precio con IVA') }}
                    {{ Form::number('precioIVA_detalle', Input::old('precioIVA_detalle'), array('class' => 'form-control')) }}
                </div>
            </td>
        </tr>
        <tr>
            <td class="ancho">
                <div class="form-group">
                    {{ Form::label('precioSinIVA_detalle', 'Precio sin IVA') }}
                    {{ Form::number('precioSinIVA_detalle', null, array('class' => 'form-control', 'size' => '30x4')) }}
                </div>
            </td>
        </tr>
        <tr>
            <td class="ancho">
                <div class="form-group">
                    {{ Form::label('precioTotal_detalle', 'Precio Total') }}
                    {{ Form::number('precioTotal_detalle', null, array('class' => 'form-control')) }}
                </div>
            </td>
        </tr>
    </table>

    {{ Form::submit('Agregar Detalle!', array('class' => 'btn btn-primary')) }}

{{ Form::close() }}

    <!-- Modal -->
    <div class="modal fade" id="modalCliente" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <?= Form::open(); ?>
                <?= Form::label('auto', 'Escriba el Numero de Chapa: '); ?>
                <?= Form::text('auto', '', array('id' => 'auto')); ?>
                <br />
                <?= Form::label('response', 'Codigo de la Orden: '); ?>
                <?= Form::text('response', '', array('id' =>'response', 'disabled' => 'disabled')); ?>
                <?= Form::close(); ?>
                <button type="submit" class="btn btn-primary">Search</button>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function() {
        $("#auto").autocomplete({
            source: "create/getdata",
            minLength: 1,
            select: function( event, ui ) {
            $('#response').val(ui.item.id);
            }
        });
    });
</script>
</body>
</html>

Here is my route file:

Route::get('nota_detalle/create/getdata', 'SearchController@index');

And this is my SearchController file

<?php

class SearchController extends BaseController {

    public function index()
    {
        $term = Str::upper(Input::get('term'));

        $results = NotaCabecera::select("codigo_nota", "chapa_vehiculo")->where('chapa_vehiculo', 'LIKE', '%'.$term.'%')->get();
        //dd($results);

        $data = array();
        foreach ($results as $result) :
            //$data[] = $result->codigo_nota.' '.$result->chapa_vehiculo;
            $data[] = array('value' => $result->chapa_vehiculo, 'id' => $result->codigo_nota);
        endforeach;

        return Response::json($data);
    }


}

This is my modal:

在此处输入图片说明

These are my logs:

在此处输入图片说明

What's the problem? And another question why it's using the php syntax it's not the same as what's the difference ?? (I followed a tutorial for this).

Thank you.

Answer 1

This example definitely worked for me.

 // Javascript <script type="text/javascript"> $(function(){ $("#auto").keyup(function(){ $("#auto").autocomplete({ source:"{{URL('getdata')}}", minLength: 3 }); $("#auto").autocomplete("widget").height(200); }); }); </script>

  // view <h2>Laravel Autocomplete form Database data</h2> {{ Form::open() }} {{ Form::label('auto', 'Find a color: ') }} {{ Form::text('auto', '', array('id' => 'auto')) }} {{form::submit('Search', array('class' => 'button expand'))}} {{ Form::close() }} // routes.php Route::any('getdata', function() { $term = Input::get('term'); $data = DB::table("words")->where('word', 'LIKE', $term.'%')->get(); $return_array = array(); foreach ($data as $v) { } return Response::json(array('value' => $v->word )); });

Github : Github repo

Answer 2

只需为所选字段添加别名：

$results = NotaCabecera::select("codigo_nota as value", "chapa_vehiculo")->where('chapa_vehiculo', 'LIKE', '%'.$term.'%')->get();

Jquery Autocomplete with Laravel 4 not working

Question

2 answers

solution1
0 2015-04-12 17:43:12

solution2
0 2015-04-25 21:30:04

Jquery Autocomplete with Laravel 4 not working

Question

2 answers

solution1 0 2015-04-12 17:43:12

solution2 0 2015-04-25 21:30:04

solution1
0 2015-04-12 17:43:12

solution2
0 2015-04-25 21:30:04