103 lines
2.9 KiB
XML
103 lines
2.9 KiB
XML
<div tal:define="name name|field.name;
|
|
css_class css_class|field.widget.css_class;
|
|
oid oid|field.oid;
|
|
field_display field_display;
|
|
style style|field.widget.style"
|
|
id="${oid}-container"
|
|
class="autocomplete-container">
|
|
|
|
<input type="hidden"
|
|
name="${name}"
|
|
id="${oid}"
|
|
value="${cstruct}" />
|
|
|
|
<input type="text"
|
|
name="${oid}-textbox"
|
|
id="${oid}-textbox"
|
|
value="${field_display}"
|
|
class="autocomplete-textbox"
|
|
style="display: none;" />
|
|
|
|
<div id="${oid}-display"
|
|
class="autocomplete-display"
|
|
style="display: none;">
|
|
|
|
<span>${field_display or ''}</span>
|
|
<button type="button" id="${oid}-change" class="autocomplete-change">Change</button>
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
deform.addCallback(
|
|
'${oid}',
|
|
function (oid) {
|
|
|
|
$('#' + oid + '-textbox').autocomplete(${options});
|
|
|
|
$('#' + oid + '-textbox').on('autocompleteselect', function (event, ui) {
|
|
$('#' + oid).val(ui.item.value);
|
|
$('#' + oid + '-display span:first').text(ui.item.label);
|
|
$('#' + oid + '-textbox').hide();
|
|
$('#' + oid + '-display').show();
|
|
$('#' + oid + '-textbox').trigger('autocompletevalueselected',
|
|
[ui.item.value, ui.item.label]);
|
|
return false;
|
|
});
|
|
|
|
$('#' + oid + '-change').click(function() {
|
|
$('#' + oid).val('');
|
|
$('#' + oid + '-display').hide();
|
|
with ($('#' + oid + '-textbox')) {
|
|
val('');
|
|
show();
|
|
focus();
|
|
}
|
|
$('#' + oid + '-textbox').trigger('autocompletevaluecleared');
|
|
});
|
|
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<script tal:condition="cleared_callback" type="text/javascript">
|
|
deform.addCallback(
|
|
'${oid}',
|
|
function (oid) {
|
|
$('#' + oid + '-textbox').on('autocompletevaluecleared', function() {
|
|
${cleared_callback}();
|
|
});
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<script tal:condition="selected_callback" type="text/javascript">
|
|
deform.addCallback(
|
|
'${oid}',
|
|
function (oid) {
|
|
$('#' + oid + '-textbox').on('autocompletevalueselected', function(event, uuid, label) {
|
|
${selected_callback}(uuid, label);
|
|
});
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<script tal:condition="cstruct" type="text/javascript">
|
|
deform.addCallback(
|
|
'${oid}',
|
|
function (oid) {
|
|
$('#' + oid + '-display').show();
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<script tal:condition="not cstruct" type="text/javascript">
|
|
deform.addCallback(
|
|
'${oid}',
|
|
function (oid) {
|
|
$('#' + oid + '-textbox').show();
|
|
}
|
|
);
|
|
</script>
|
|
|
|
</div>
|