exemplo-typeahead-2.html

@extends('layouts.base')

@section('body')
    <div class='row'>
        <div class='col-sm-12'>
            <div class="row">
                <div class="col-sm-12">
                    <div class="box">
                        <div class="box-header lightgrey-background">
                            <div class="title"></div>
                            <div class="actions">
                                <a class="btn box-remove btn-xs btn-link" href="#"><i class="icon-remove"></i> </a>
                                <a class="btn box-collapse btn-xs btn-link" href="#"><i></i> </a>
                            </div>
                        </div>
                        <div class="box-content">
                            @if (count($errors) > 0)
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            {{ Form::open(['class' => 'form form-horizontal']) }}
                                <!-- Preenchido dinamicamente via javascript -->
                                <input type="hidden" name="cadernoId">

                                <div class="form-group">
                                    <label class="col-md-2 control-label" for="">CPF do cliente</label>
                                    <div class="col-sm-6 col-md-3">
                                        {{ Form::text('cpf', null, ['class' => 'form-control typeahead', 'autocomplete' => 'off']) }}
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-2 control-label">Código Familiar</label>
                                    <div class="col-sm-6 col-md-3">
                                        {{ Form::text('codigoFamiliar', null, ['class' => "form-control"]) }}
                                    </div>
                                </div>

                                <div class="form-actions form-actions-padding-sm">
                                    <div class="row">
                                        <div class="col-md-10 col-md-offset-2">
                                            <button class="btn btn-primary" type="submit">
                                                <i class="icon-save"></i>
                                                Salvar
                                            </button>
                                            <button class="btn" type="submit">Cancelar</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- row end -->
@endsection

@section('javascripts')
    @parent

<script src="{{ asset('assets/cad/plugins/typeahead.js/typeahead.bundle.js') }}"></script>
<script>
var searcher = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace(),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: "{{ route('app.cadernos_digitacao.pesquisar_caderno_por_cpf', ['cpf' => 'QUERY']) }}",
        wildcard: 'QUERY'
    }
});

var typeahead = $('input[name=cpf].typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},
{
    display: 'cpf',
    source: searcher,
    templates: {
        empty: ['<div class="empty-message text-danger">', 'Nenhum CPF encontrado', '</div>'].join("\n"),
        suggestion: function (data) {
            return ['<div>', data.cpf, '</div>'].join('');
        }
    }
});

typeahead.on('typeahead:select', function(eventData, suggestion) {
    $('input[name=cadernoId][type=hidden]').val(suggestion._id);
});
</script>
@endsection