zofe / rapyd-laravel

deprecated rewritten in rapyd-livewire
MIT License
866 stars 297 forks source link

Access full dataset from remote autocomplete for filling more fields onchange #451

Closed anthonymanzo closed 5 years ago

anthonymanzo commented 5 years ago

Hi, How can I get all the data from the response so I can auto-fill the rest of my form when a change event occurs on the below 'vendor_name' field?

Here's here's how my element looks ( as part of a DataEdit object):

$edit->add('vendor_name','Vendor Name *','autocomplete')
  ->remote("vendor_name", "vendor_name", "/drugs/banner-vendors-autocomplete")
  ->rule('required');

And here's my method that responds to the remote route, it returns all the other fields I need besides just the vendor name:

public function getBannerVendorsAutocomplete()
    {
        return \DB::table('drug_banner_vendors')

        ->select(\DB::raw(
            '*'
            )
        )->where("vendor_name","like", "%".\Input::get("q")."%")
        ->orderBy('vendor_name')->take(10)->get();

    }

Thanks!

anthonymanzo commented 5 years ago

Hi, This was my workaround. It looks like 'auto_' is prepended to the name of the autocomplete element. So, I ended up doing this in att the bottom of my blade file:

@push('scripts')
 {!! Rapyd::scripts() !!}
 <script type="text/javascript">
 $(document).ready(function () {
    //Prefill the entire form if an entry is found and selected.
     $('#auto_vendor_name').on('typeahead:selected', function (e, datum) {
    console.log(datum);
    if(typeof datum.email_address != "undefined"){ 
        $("#email_address").val(datum.email_address);
    } else {
        $("#email_address").val('');
    }
    if(typeof datum.contact_name != "undefined"){ 
        $("#contact_name").val(datum.contact_name);
    } else {
        $("#contact_name").val('');
    }
    if(typeof datum.full_address != "undefined"){ 
        $("#full_address").val(datum.full_address);
    } else {
        $("#full_address").val('');
    }
    if(typeof datum.phone_number != "undefined"){ 
        $("#phone_number").val(datum.phone_number);
    } else {
        $("#phone_number").val('');
    }

});

});  
</script>

@endpush

I'm closing the ticket.