[% USE P %]

<h1>Customer Vendor Autocomplete Testpage</h1>

<br>
Customer: with preselected id 822<br>
[% P.customer_vendor.picker('customer_id', 822, type='customer') %]<br>

<br><hr>
Vendor: <br>
[% P.customer_vendor.picker('vendor_id', '', type='vendor') %]<br>

<br><hr>
customer with fat change<br>
[% P.customer_vendor.picker('customer_id2', '', type='customer', fat_set_item=1) %]<br>
<div>id from change <span id='change1'></span></div>
<div>greeting from fat change <span id='change2'></span></div>

<br><hr>
fat vendor with change<br>
[% P.customer_vendor.picker('vendor_id2', '', type='vendor', fat_set_item=1) %]<br>
<div>id  from change<span id='change3'></span></div>
<div>greeting from fat change <span id='change4'></span></div>

<br><hr>
this one will be a reinit_widget after 4s:<br>
<span id='vendor3' class="customer_vendor_picker">
<input id="vendor3_id" class="" type="hidden" name="vendor3_id" value="" data-customer-vendor-picker-data="{&quot;cv_type&quot;:&quot;vendor&quot;}">
<input id="vendor3_id_name" type="text" name="" value="">
</span>

<br><hr>
this should have three '-' before and after touching:<br>
---[% P.customer_vendor.picker('vendor5_id', '', type='vendor') %]---


<script type='text/javascript'>
 $('#customer_id2').change(function() { $('#change1').html($('#customer_id2').val()) })
 $('#customer_id2').on('set_item:CustomerVendorPicker', function(e,o) { $('#change2').html(o.greeting) })

 $('#vendor_id2').change(function() { $('#change3').html($('#vendor_id2').val()) })
 $('#vendor_id2').on('set_item:CustomerVendorPicker', function(e,o) { $('#change4').html(o.greeting) })

window.setTimeout(function() {
  console.log("adding last one now!");
  $('#vendor3_id').addClass('customer_vendor_autocomplete');
  $('#vendor3').addClass('customer_vendor_picker');
  kivi.reinit_widgets();
}, 4000);
</script>