首页 > 解决方案 > 自动建议多个搜索 jquery

问题描述

如何进行自动建议多值搜索?

我的观点:

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。请任何帮助都会有所帮助

标签: javascriptpythonjquerydjangosearch

解决方案


推荐阅读