Better user search to add friendships

note_kfet/static/js/autocomplete_model.js

@@ -13,21 +13,29 @@ $(document).ready(function () {
     $('#' + prefix + '_reset').removeClass('d-none')
 
     $.getJSON(api_url + (api_url.includes('?') ? '&' : '?') + 'format=json&search=^' + input + api_url_suffix, function (objects) {
-      let html = ''
+      let html = '<ul class="list-group list-group-flush" id="' + prefix + '_list">'
 
       objects.results.forEach(function (obj) {
         html += li(prefix + '_' + obj.id, obj[name_field])
       })
+      html += '</ul>'
 
-      const results_list = $('#' + prefix + '_list')
-      results_list.html(html)
+      target.tooltip({
+        html: true,
+        placement: 'bottom',
+        trigger: 'manual',
+        container: target.parent(),
+        fallbackPlacement: 'clockwise'
+      })
+
+      target.attr("data-original-title", html).tooltip("show")
 
       objects.results.forEach(function (obj) {
         $('#' + prefix + '_' + obj.id).click(function () {
           target.val(obj[name_field])
           $('#' + prefix + '_pk').val(obj.id)
 
-          results_list.html('')
+          target.tooltip("hide")
           target.removeClass('is-invalid')
           target.addClass('is-valid')
 
@@ -37,8 +45,8 @@ $(document).ready(function () {
         if (input === obj[name_field]) { $('#' + prefix + '_pk').val(obj.id) }
       })
 
-      if (results_list.children().length === 1 && e.originalEvent.keyCode >= 32) {
-        results_list.children().first().trigger('click')
+      if (objects.results.length === 1 && e.originalEvent.keyCode >= 32) {
+        $('#' + prefix + '_' + objects.results[0].id).trigger('click')
       }
     })
   })

note_kfet/templates/autocomplete_model.html

@@ -9,9 +9,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
    name="{{ widget.name }}_name" autocomplete="off"
     {% for name, value in widget.attrs.items %}
         {% ifnotequal value False %}{{ name }}{% ifnotequal value True %}="{{ value|stringformat:'s' }}"{% endifnotequal %}{% endifnotequal %}
-    {% endfor %}>
+    {% endfor %}
+    aria-describedby="{{widget.attrs.id}}_tooltip">
     {% if widget.resetable %}
         <a id="{{ widget.attrs.id }}_reset" class="btn btn-light autocomplete-reset{% if not widget.value %} d-none{% endif %}">{% trans "Reset" %}</a>
     {% endif %}
-<ul class="list-group list-group-flush" id="{{ widget.attrs.id }}_list">
-</ul>
+