autocomplete_input_ms.pt
3.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<span tal:define="name name|field.name;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
style style|field.widget.style;
autofocus autofocus|field.autofocus;
slave slave|field.widget.slave;
url url|field.widget.url;
" tal:omit-tag="">
${field.start_mapping()}
<input type="hidden" name="auto_id" id="${oid}-auto_id" value="${auto_id}" />
<input type="text" name="auto_value" value="${auto_value}" data-provide="typeahead" tal:attributes="class string: form-control ${css_class or ''};
style style;
autofocus autofocus;
attributes|field.widget.attributes|{};" id="${oid}-auto_value" />
${field.end_mapping()}
<script tal:condition="field.widget.values" type="text/javascript">
deform.addCallback(
'${oid}',
function (oid) {
$('#' + oid + '-auto_value').typeahead(${ structure: options });
if ("${autofocus}" == "autofocus") {
$('#' + oid + '-auto_value').focus();
}
$('#' + oid + '-auto_value').bind('typeahead:selected', function (obj, datum, name) {
$('#' + oid + '-auto_id').val(datum.id);
var not_check = ["id", "value"];
$.each(datum, function (key, val) {
if (!not_check.includes(key)) {
var eleName = $('#' + key).prop('nodeName');
if (eleName !== undefined) {
eleName = eleName.toLowerCase();
if (eleName === "select")
$("#" + key).val(val).trigger("change");
else if (eleName === "input")
$("#" + key).val(val);
else
$("#" + key).text(val);
} else {
//Check apakah jika radio button
eleName = $("input[name ='" + key + "']").prop('type');
if (eleName == "radio") {
$("input[name ='" + key + "'][value='" + val + "']").prop('checked', true);
}
}
}
});
$('#' + oid + '-auto_id').change();
});
$('#' + oid + '-auto_value').on('input',
function (e) {
let val = $('#' + oid + '-auto_value').val();
if (val === null || val === "") {
$('#' + oid + '-auto_id').val("");
}
});
});
</script>
<script type="text/javascript" tal:condition="url and slave">
deform.addCallback(
'${oid}',
function (oid) {
$('#' + oid + "-auto_id").change(function () {
$("#${slave}").val("");
$("#${slave}").empty();
$("#${slave}").append('<option value="" selected disabled>Pilih Data...</option>');
let value = $(this).val();
if (value) {
$.ajax({
type: "GET",
url: "${url}" + value,
success: function (res) {
if (res) {
var def_value = null;
if (res.hasOwnProperty("default")) {
values = res.values;
def_value = res.default;
}
else
values = res;
$.each(values, function (key, value) {
if (key === def_value)
$("#${slave}").append('<option value="' + key + '" selected>' + value + '</option>');
else
$("#${slave}").append('<option value="' + key + '">' + value + '</option>');
});
} else {
$("#${slave}").empty();
}
}
});
}
$("#${slave}").change();
});
});
</script>
</span>