56 lines
1.8 KiB
HTML
56 lines
1.8 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2>Create Player</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
{{ form.as_p }}
|
|
<button type="submit" class="btn btn-primary">Create Player</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const parent1SearchInput = document.getElementById('id_parent1_search');
|
|
const parent2SearchInput = document.getElementById('id_parent2_search');
|
|
|
|
function setupAutocomplete(inputElement) {
|
|
const datalist = document.createElement('datalist');
|
|
datalist.id = inputElement.id + '_list';
|
|
inputElement.setAttribute('list', datalist.id);
|
|
document.body.appendChild(datalist); // Append to body instead of parentNode
|
|
|
|
inputElement.addEventListener('input', function() {
|
|
const query = this.value;
|
|
if (query.length < 2) {
|
|
datalist.innerHTML = '';
|
|
return;
|
|
}
|
|
fetch(`/accounts/user-search/?q=${query}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
datalist.innerHTML = '';
|
|
data.forEach(userString => {
|
|
const option = document.createElement('option');
|
|
option.value = userString;
|
|
datalist.appendChild(option);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
setupAutocomplete(parent1SearchInput);
|
|
setupAutocomplete(parent2SearchInput);
|
|
});
|
|
</script>
|
|
{% endblock %}
|