zhuishuyun_quickapp/resources/views/cp/web/book/exceptadd.blade.php

@extends('cp.web.layouts.admin')
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">书籍列表</h1>
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <div class="panel">
        @if(($errors->has('message')))
            <div class="alert alert-danger" role="alert">{{$errors->first('message')}}</div>
        @endif
            @if (session('message'))
                <div class="alert alert-success" role="alert">{{session('message')}}</div>
            @endif
        <form method='post' action="{{url('book/exceptadd')}}">
            <div class="form-group">
                <label>cp</label>
                <select class="form-control" name="cp_user_id" placeholder="cp" id="cp-inpt">
                    <option value=""></option>
                    @foreach($cps as $cp)
                        @if(session('cp_user_id') && $cp->id == session('cp_user_id') )
                            <option value="{{$cp->id}}" selected>{{$cp->username}}</option>
                        @else
                            <option value="{{$cp->id}}">{{$cp->username}}</option>
                        @endif
                    @endforeach
                </select>
            </div>

            <div class="form-group">
                <label>书名</label>
                <input class="form-control" type="text" name="book_name" autocomplete="off" id="input-book-name">
                <input class="form-control" type="hidden" name="bid" id="hidden-bid">
                <div class="btn-group-vertical" id="tips">
                </div>
            </div>
            <button type="submit" class="btn btn-success">提交</button>
        </form>
    </div>
@endsection

@push('script')
<script>
$(function () {
    $('#tips').hide();
    $('#input-book-name').on('keyup',function () {

        autoComplete(this)

    })

    $('#input-book-name').on('focus',function () {
        autoComplete(this)
    })

    $('#input-book-name').on('blur',function () {
        //$('#tips').hide();
    });

    $('#tips').on('click','.js-list',function () {
        var name = $(this).html();
        var id = $(this).data('id');
        $('#input-book-name').val(name);
        $('#hidden-bid').val(id);
        $('#tips').hide();
    })

    function autoComplete(dom) {
        var cp = $('#cp-inpt').find("option:selected").text();
        if(!cp){
            $('#tips').hide();
            return false;
        }
        var name = $(dom).val();
        $('#hidden-bid').val('');
        $.ajax({
            url:'/book/getBooks',
            data:{cp_user:cp,name:name},
            dataType:'json',
            success:function (res) {
                if(res.data){
                    $('#tips').empty().prepend(res.data);
                }
            }
        });
        $('#tips').show();
    }
})
    </script>
@endpush