Add autocompletion for add storage modal for user
This commit is contained in:
parent
0d288e0d14
commit
f4113d71d8
57
shimatta_kenkyusho/static/js/autocomplete.js
Normal file
57
shimatta_kenkyusho/static/js/autocomplete.js
Normal file
@ -0,0 +1,57 @@
|
||||
const autocomplete_query_delay_ms = 60;
|
||||
|
||||
class AutocompleteText {
|
||||
constructor(text_id, dropdown_id, query_function)
|
||||
{
|
||||
this.text_id = text_id;
|
||||
this.dropdown_id = dropdown_id;
|
||||
this.query_callback = query_function.bind(this);
|
||||
|
||||
document.getElementById(text_id).addEventListener("keyup", this.ac_delay(function(event) {
|
||||
this.query_callback(document.getElementById(this.text_id).value, this);
|
||||
}, autocomplete_query_delay_ms).bind(this));
|
||||
|
||||
}
|
||||
|
||||
show_results(results) {
|
||||
var ul = document.getElementById(this.dropdown_id);
|
||||
ul.innerHTML = '';
|
||||
for (var i = 0; i < results.length; i++) {
|
||||
var node = document.createElement('li');
|
||||
node.setAttribute('class', 'dropdown-item');
|
||||
node.appendChild(document.createTextNode(results[i]));
|
||||
ul.appendChild(node);
|
||||
node.addEventListener('click',
|
||||
(e) => {
|
||||
var element = e.target;
|
||||
var text_box = document.getElementById(this.text_id);
|
||||
text_box.value = element.innerHTML;
|
||||
var dropdown = bootstrap.Dropdown.getOrCreateInstance(text_box);
|
||||
dropdown.hide();
|
||||
}
|
||||
);
|
||||
}
|
||||
if (results.length == 0) {
|
||||
var node = document.createElement('li');
|
||||
node.setAttribute('class', 'dropdown-item text-danger');
|
||||
node.appendChild(document.createTextNode('No results'));
|
||||
ul.appendChild(node);
|
||||
}
|
||||
|
||||
var dropdown = bootstrap.Dropdown.getOrCreateInstance(document.getElementById(this.text_id));
|
||||
dropdown.show();
|
||||
}
|
||||
|
||||
ac_delay(callback, ms) {
|
||||
var timer = 0;
|
||||
return function() {
|
||||
var context = this, args = arguments;
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function() {
|
||||
callback.apply(context, args);
|
||||
}, ms || 0);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
}
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -68,6 +68,7 @@
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="{% static 'js/kenyusho-api-v1.js' %}"></script>
|
||||
<script type="text/javascript" src="{% static 'js/autocomplete.js' %}"></script>
|
||||
{% block custom_scripts %}
|
||||
{% endblock custom_scripts %}
|
||||
|
||||
|
@ -1,3 +1,4 @@
|
||||
{% load static %}
|
||||
<div class="modal fade" id="add-sub-modal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
@ -18,8 +19,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<label for="{{form.responsible.id_for_label}}">Responsible</label>
|
||||
<div class="input-group has-validation">
|
||||
<span class="input-group-text" id="add_storage_username_prepend">@</span><input type="text" value="{{form.responsible.value}}" class="form-control{% if form.responsible.errors or form.non_field_errors %} is-invalid{% endif %}" id="{{form.responsible.id_for_label}}" name="{{form.responsible.name}}" aria-describedby="add_storage_username_prepend validationServerUsernameFeedback" required>
|
||||
<div class="input-group has-validation dropdown">
|
||||
<span class="input-group-text" id="add_storage_username_prepend">@</span><input autocomplete="off" data-bs-toggle="dropdown" type="text" value="{{form.responsible.value}}" class="form-control{% if form.responsible.errors or form.non_field_errors %} is-invalid{% endif %}" id="{{form.responsible.id_for_label}}" name="{{form.responsible.name}}" aria-describedby="add_storage_username_prepend validationServerUsernameFeedback" required>
|
||||
<ul class="dropdown-menu" aria-labelledby="{{form.responsible.id_for_label}}" id="{{form.responsible.id_for_label}}-ac-dropdown">
|
||||
</ul>
|
||||
<div id="validationServerUsernameFeedback" class="invalid-feedback">
|
||||
{% for msg in form.responsible.errors %}
|
||||
{{msg}}
|
||||
|
@ -1,5 +1,6 @@
|
||||
{% extends 'base.html' %}
|
||||
{% load qr_code %}
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<nav aria-label="breadcrumb" class="fs-4">
|
||||
@ -53,19 +54,32 @@
|
||||
{% endblock content %}
|
||||
|
||||
{% block custom_scripts %}
|
||||
{% if add_storage_form.errors %}
|
||||
<script type="text/javascript">
|
||||
{% if add_storage_form.errors %}
|
||||
|
||||
var addSubStorageModal = document.querySelector('#add-sub-modal');
|
||||
var c_modal = bootstrap.Modal.getOrCreateInstance(addSubStorageModal);
|
||||
c_modal.show();
|
||||
</script>
|
||||
{% endif %}
|
||||
{% if delete_storage_errors %}
|
||||
<script type="text/javascript">
|
||||
var deleteStorageModal = document.querySelector('#delete-storage-modal');
|
||||
var d_modal = bootstrap.Modal.getOrCreateInstance(deleteStorageModal);
|
||||
d_modal.show();
|
||||
</script
|
||||
{% endif %}
|
||||
|
||||
new AutocompleteText('{{add_storage_form.responsible.id_for_label}}', '{{add_storage_form.responsible.id_for_label}}-ac-dropdown',
|
||||
function(search, autocomplete_obj) {
|
||||
api_search_user(search, function(results) {
|
||||
var usernames = new Array();
|
||||
console.log(results);
|
||||
for (var i = 0; i < results.results.length; i++) {
|
||||
usernames.push(results.results[i].username);
|
||||
}
|
||||
console.log(usernames);
|
||||
autocomplete_obj.show_results(usernames);
|
||||
}, function(){});
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock custom_scripts %}
|
||||
|
||||
|
@ -61,12 +61,25 @@
|
||||
{% endblock content %}
|
||||
|
||||
{% block custom_scripts %}
|
||||
{% if add_storage_form.errors %}
|
||||
<script type="text/javascript">
|
||||
{% if add_storage_form.errors %}
|
||||
var addSubStorageModal = document.querySelector('#add-sub-modal');
|
||||
var modal = bootstrap.Modal.getOrCreateInstance(addSubStorageModal);
|
||||
modal.show();
|
||||
{% endif %}
|
||||
new AutocompleteText('{{add_storage_form.responsible.id_for_label}}', '{{add_storage_form.responsible.id_for_label}}-ac-dropdown',
|
||||
function(search, autocomplete_obj) {
|
||||
api_search_user(search, function(results) {
|
||||
var usernames = new Array();
|
||||
console.log(results);
|
||||
for (var i = 0; i < results.results.length; i++) {
|
||||
usernames.push(results.results[i].username);
|
||||
}
|
||||
console.log(usernames);
|
||||
autocomplete_obj.show_results(usernames);
|
||||
}, function(){});
|
||||
});
|
||||
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endblock custom_scripts %}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user