Django项目----搜索框功能

背景

实现浏览器搜索引擎的下拉搜索内容效果

一、自定义视图

创建用于接收输入框内容、模糊查询数据、返回查询结果的视图函数。

1、goods应用中的views.py文件定义视图函数：

方法①：使用haystack库

class searchJsonView(View):
    def get(self, request):
        from haystack.query import SearchQuerySet, Raw
        qParams = request.GET.get('q')
        if not qParams:
            return JsonResponse({
                'code': 400,
                'msg': '缺少参数'
            })
        goods = SearchQuerySet().filter(text=Raw(qParams)).order_by('sale_count')
        res_list = []
        try:
            for item in goods:
                search_obj = {}
                search_obj['id'] = item.object.id
                search_obj['name'] = item.object.name
                res_list.append(search_obj)
        except:
            pass
        print('res_list:',res_list)
        return JsonResponse({
            'code': 200,
            'data': res_list,
        })

方法②：使用python的模糊查询语句（推荐）

class SearchJsonView(View):
    def post(self, request):
    	# POST请求接收输入框内容q
        qParams = request.POST.get('q')
        if not qParams:
            return JsonResponse({
                'code': 400,
                'msg': '缺少参数'
            })
        # 使用 Q语句 进行 多字段模糊查询
        article = SelfText.objects.filter(
            Q(title__icontains=qParams) | Q(label__icontains=qParams) | Q(text_content__icontains=qParams) | Q(
                user_name__username__icontains=qParams)).values_list("id", "title")
        res_list = []
        try:
            for item in article:
                search_obj = {'id': item[0], 'title': item[1]}
                res_list.append(search_obj)
        except Exception as e:
            print("搜索报错：", e)
        return JsonResponse({
            'code': 200,
            'data': res_list,
        })

2、添加order_by索引

（如果视图函数使用的是方法②可跳过此步骤）
在应用中的search_indexes.py文件中添加：

sale_count = indexes.CharField(model_attr=‘sale_count’)

修改后，Terminal执行:

python manage.py rebuild_index

该部分配置详情可以查看上一篇文章

3、配置路由

应用下的urls.py文件中添加：

	url(r'^searchJson/', searchJsonView.as_view(),name='searchJson'),

4、添加搜索框下拉框样式

main.css文件添加：

.search_con{
	position:relative;
}
.search_con .search_tips_con{
	position:absolute;
	width:444px;
	line-height:36px;
	border:1px solid #FF5972;
	border-top:0;
	padding:0 36px;
	top:38px;
	background:#fff;
	left:-1px;
	display:none; /*# 页面加载先隐藏*/
}

5、修改base.html

修改页面 search_bar 表单，

{# 网页搜索框 #}
{% block search_bar %}
<div class="search_con fr">
    <form action="{% url 'haystack_search' %}" method="get">
        <input type="text" class="input_text fl" name="q" id="top_search" placeholder="搜索商品" autocomplete="off">
        <input type="submit" class="input_btn fr" name="" value="搜索">
    </form>
    <ul class="search_tips_con" id="search_tips_con">
        <li><a href=""></a></li>
	</ul>
</div>
{% endblock search_bar %}

6、ajax 请求数据渲染页面

每个页面都会有搜索框，因此在 static/js 下创建 search.js，在 base.html 中引入 search.js

	<script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <script src="{% static 'js/search.js' %}"></script>

其中search.js内容如下

$(function(){
    $('#top_search').on('input',function(){
        var val = $(this).val()
        if(!val){
            $("#search_tips_con").html('')
            $("#search_tips_con").hide();
            return false;
        }
        $.ajax({
            url:'/goods/searchJson/?q='+val, success(res){
                if(res.code === 200){
                    $("#search_tips_con").show();
                    var htmlStr = '';
                    for(var i=0;i<res.data.length;i++){
                        htmlStr += '<li><a href="/goods/detail/'+res.data[i].id+'">'+ res.data[i].name+'</a></li>'
                    }
                    if(!htmlStr){
                        htmlStr = '<li><a href="javascript:;">没有搜索到内容</a></li>'
                    }
                    $("#search_tips_con").html(htmlStr);
                }
            }
        })
    })
})