Wrote autocompletion for foreign key field

shimatta_kenkyusho/static/js/autocomplete-foreign-key-field.js

@@ -0,0 +1,93 @@
+function clear_foreign_key_field(uuid_field, dflex_container) {
+    dflex_container.innerHTML = '';
+    var span = document.createElement('span');
+    span.setAttribute('class', 'text-secondary');
+    span.appendChild(document.createTextNode('None selected'));
+    dflex_container.appendChild(span);
+    uuid_field.removeAttribute('value')
+}
+
+function initialize_autocompletion_foreign_key_field(search_element) {
+    var image_field_name = search_element.getAttribute('data-ac-image-field');
+    var name_field_name = search_element.getAttribute('data-ac-name-field');
+    var search_url = search_element.getAttribute('data-ac-url');
+    var base_id = search_element.getAttribute('id');
+    var uuid_field = search_element.parentElement.querySelector('#'+base_id+'-uuid-field');
+    var dflex_container = search_element.parentElement.querySelector('#'+base_id+'-dflex-container');
+    var initial_delete_button = search_element.parentElement.querySelector('[data-ac-delete]');
+
+    console.log(initial_delete_button);
+    console.log(image_field_name);
+    console.log(search_url);
+    console.log(base_id);
+    
+    if (initial_delete_button) {
+        initial_delete_button.addEventListener('click', (e) => {
+            clear_foreign_key_field(uuid_field, dflex_container);
+        });
+    }
+
+    new AutocompleteCustomUi(
+        base_id, base_id+'-ac-ul', function(search_query, autocomplete_obj) {
+            api_ajax_request_without_send('GET', search_url+`?search=${encodeURIComponent(search_query)}`, function(method, url, json) {
+                if (json.results == undefined || json.results == null)
+                    return;
+                var results = json.results;
+                var nodes = [];
+
+                if (image_field_name != '' && image_field_name != null) {
+                    for (var i = 0; i < results.length; i++) {
+                        var res = results[i];
+                        var node = AutocompleteCustomUi.create_media_div(res[image_field_name], [document.createTextNode(res[name_field_name])]);
+                        nodes.push({'ui': node, 'data': {'result': res, 'uuid_field': uuid_field}});
+                    }
+                } else {
+                    for (var i = 0; i < results.length; i++) {
+                        nodes.push({'ui': document.createTextNode(results[i][name_field_name]), 'data': {'result':results[i], 'uuid_field': uuid_field}})
+                    }
+                }
+
+                autocomplete_obj.show_results(nodes, function(data) {                    
+                    var name = data['result'][name_field_name];
+                    if (image_field_name != '' && image_field_name != null) {
+                        var image = data['result'][image_field_name];
+                        if (image == null) {
+                            image = fallback_img_path;
+                        }
+                        dflex_content = AutocompleteCustomUi.create_media_div(image, [document.createTextNode(name)]);
+                    } else {
+                        dflex_content = document.createTextNode(name);
+                    }
+                    dflex_container.innerHTML = '';
+                    dflex_container.appendChild(dflex_content);
+                    
+                    search_element.value = data['result'][name_field_name];
+                    data['uuid_field'].value = data['result'].id;
+                    
+                    var span = document.createElement('span');
+                    span.setAttribute('class', 'btn-close ms-4');
+                    span.addEventListener('click', (e) => {
+                        clear_foreign_key_field(uuid_field, dflex_container);
+                        search_element.value = '';
+                    });
+                    dflex_container.appendChild(span);
+
+                })   
+            }, function (){});
+        }
+    )
+}
+
+
+function initialize_autocompletion_for_foreign_key_fields() {
+    var autocomplete_searches = document.querySelectorAll("[data-ac-url]");
+    if (autocomplete_searches.length == 0) {
+        return;
+    }
+    autocomplete_searches.forEach(initialize_autocompletion_foreign_key_field);
+}
+
+
+document.addEventListener("DOMContentLoaded", function(event) { 
+    initialize_autocompletion_for_foreign_key_fields();
+});

shimatta_kenkyusho/static/js/autocomplete.js

@@ -19,7 +19,7 @@ class AutocompleteCustomUi {
         img_div.appendChild(img);
         ui.appendChild(img_div);
         var text_div = document.createElement('div');
-        text_div.setAttribute('class', 'flex-grow-1 ms-3');
+        text_div.setAttribute('class', 'ms-3');
         
         if (text_nodes != undefined) {
             for (var i = 0; i < text_nodes.length; i++) {