автозаполнение множественного поиска jquery

Question

как сделать автозаполнение множественным поиском значений?

мой взгляд:

def index(request): 

... 
    results = [] 
    if request.is_ajax(): 
        q = request.GET.get('term', '') 

        if len(q) > 2: 
            results = list(Tag.objects.filter(name__istartswith=q).values_list(Lower('name'), flat=True)) 
            results = [f'{i} ' for i in results]

        return JsonResponse(results, safe=False)    
... 

html:

<div id="search">
      <form method="get" action="{% url 'main:home' %}"> 
        {% csrf_token %}        
        <input type="text" name="q" placeholder="Поиск по сайту" value="{{ request.GET.q }}"> 
        <input type="submit" value="Найти">                 
      </form>
</div>
<script>
function getCookie(name) { 
  var cookieValue = null; 
  if(document.cookie && document.cookie != '') { 
    var cookies = document.cookie.split(';'); 
    for(var i = 0; i < cookies.length; i++) { 
      var cookie = jQuery.trim(cookies[i]); 
      if(cookie.substring(0, name.length + 1) == (name + '=')) { 
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
        break;         
      }       
    }
  } 
  return cookieValue;   
} 
$.ajaxSetup({ 
  global: true, 
  beforeSend: function(xhr, settings) { 
    if(!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) { 
      xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken')); 
      xhr.setRequestHeader("Content-Type", 'application/x-www-form-urlencoded; charset=UTF-8');       
    }     
  }, 
  timeout: 8000   
}); 
<!-- /Конец кода для работы csrf с ajax -->
$('#search input[name="q"]').autocomplete({ 
  'source': '{% url "main:home" %}', 
  'minLength': 2, 
  'appendTo': "#search"     
}); 
</script>

это работает правильно с одним исключением: Мне предложили https://jqueryui.com/autocomplete/#multiple, но я не понимаю, что с этим делать. Я не очень хорош в js, JQ. пожалуйста, любая помощь будет полезна