使用 Laravel 4 的 Jquery 自动完成功能不起作用答案

【问题标题】：Jquery Autocomplete with Laravel 4 not working使用 Laravel 4 的 Jquery 自动完成功能不起作用
【发布时间】：2015-10-30 06:37:14
【问题描述】：

我在 Laravel 4.2.13 中使用 jquery 自动完成功能。我正在尝试在 boostrap 模态中搜索表单中的值。我正在传递一个 get 值并正确接收响应，但文本输入未填充该值。这是我的 create.blade.php 视图

<!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>

这是我的路线文件：

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

这是我的 SearchController 文件

<?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);
    }


}

这是我的模态：

这些是我的日志：

有什么问题？还有一个问题，为什么它使用 php 语法它不一样有什么区别？（为此我遵循了一个教程）。

谢谢。

【问题讨论】：

标签： php jquery-ui laravel

【解决方案1】：

这个例子确实对我有用。

// 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

【讨论】：

这怎么可能对你有用？你有搜索按钮，但这应该是自动完成的？
忘记写了，现在编辑我上面的评论太晚了：看看你在 rotes.php 中的 foreach 吗？ foreach ($data as $v) { } return Response::json(array('value' => $v->word ));认真的吗？？

【解决方案2】：

只需为选定的字段设置别名：

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

【讨论】：