@extends('layouts.master')
@include('partials.containers-header')
@section('content')
<div class="row">
    <div class="col-12"><h2>Laravel 5.7 Auto Complete Search Using Jquery UI</h2></div>
    <div class="col-12">
        <div id="custom-search-input">
            <div class="input-group">
                <input id="search" name="search" type="text" class="form-control" placeholder="Search" />
                {{--<input class="typeahead form-control" type="text">--}}
            </div>
        </div>
    </div>
</div>
@include('partials.containers-footer')
@endsection

@section('javascript')
<script>
    $(document).ready(function() {
        $( "#search" ).autocomplete({

            source: function(request, response) {
                $.ajax({
                    url: "{{url('autocomplete')}}",
                    data: {
                        term : request.term
                    },
                    dataType: "json",
                    success: function(data){
                        var resp = $.map(data,function(obj){
                            //console.log(obj.city_name);
                            return obj.name;
                        });

                        response(resp);
                    }
                });
            },
            minLength: 1
        });
    });
</script>
@endsection