Question

尝试创建搜索表单。目前正在使用ajax自动完成功能。

  <div  class="ui-widget">
   <label for="search">Search for friends: </label>
   <input id="search">
 </div>



   $(function() {
  $("#search").autocomplete({
    source: "/accounts/ajax/search/",
    minLength: 2,
    select: function( event, ui )
  });
});

以下是处理我的ajax请求的视图。

 def get_ajax_search(request):
    query = request.GET.get('term', '')
    print(query)
    if request.is_ajax():
        qs1 = BasicUser.objects.filter(Q(first_name__icontains=query)) 
        results = []
        for user in qs1:
            basic_user_json = {}
            basic_user_json['id'] = user.pk
            basic_user_json['label'] = user.first_name+" "+  user.last_name
            basic_user_json['value'] = user.first_name+" "+  user.last_name
            results.append(basic_user_json)
    else:
        data = 'fail'
    mimetype = 'application/json'
    return HttpResponse(data, mimetype)

通过几个问题感谢您的帮助：

选择结果时如何重定向到其他页面。
如何在每个搜索结果旁边显示用户个人资料图片

Answer 1

选择结果时如何重定向到其他页面。   尝试以下示例：

这是一个羽毛https://plnkr.co/edit/MieqYB6K7inzPVBiinDZ?p=preview

$("#search").autocomplete({
    source: "/accounts/ajax/search/",
    minLength: 2,
    select: function( event, ui ) {

        window.open('http://example.com/'+ui.item.value, '_blank')
    }
  });

如何在每个搜索结果旁边显示用户个人资料图片最重要的是

您可以关注

jquery autocomplete display custom result

是否有更好的方法从数据库中检索数据并将其发送到ajax函数，假设它将成为高负载网站。任何想法或见解都将不胜感激。

这是非常主观的。你必须定义＆＃34;更好＆＃34;。我建议根据SO问题使用HTML图像源，这样至少检索这些图像是异步的，否则您的服务器调用将花费很长时间来检索每个项目的内嵌图像数据。

Ajax搜索表单django

1 个答案: