SummerDawn

文章较多时，为了方便查找文章，增加按文章标题和内容搜索的查找功能。

一、在模板文件base2中添加表单

在联系我们后面增加一个li标签，将form表单装入其中：

<li>
	<a href="{% url 'blog:contact' %}" title="联系我们"><i class="fa fa-info" aria-hidden="true"></i> 联系</a>
</li>
<li class="search">
	<form id="searchform"  action="{% url 'blog:search' %} " accept-charset="UTF-8" method="get">
	<input type="search" required name="search" id="search" value= "{{search}}" autocomplete="off" placeholder="搜索" class="search-input" >
	<a class="search-btn" id="search-btn" href="javascript:void(0);"><i class="fa fa-search"></i></a>
	<div id="navbar-search-tips"></div></form>
</li>
</ul>

调整相应的样式表：

nav form .search-input {
    padding: 0 10px 0 10px;
    width: 80px;
    font-size: 14px;
    border: 1px solid #eee;
    border-radius: 40px;
    background: #eee;
    margin-right:-30px;
    margin-left:10px;
    font-weight: 800;
    }
@media (min-width: 768px) { nav .search {
        padding-top:15px;
    }
    }
    nav form .search-btn {
    width: 30px;
    height: 30px!important;
    line-height: normal!important;
    padding: 0!important;
    color: #969696!important;
    text-align: center;
    margin-right:20px;
}
i.fa-search{
    font-size: 18px;
    opacity:0.5;
   }
i.fa-search:hover{ opacity: 1;}

.navbar-custom .nav li a {
font-size:14px;
}

增加获取焦点的动画：

$("#search").focus(function(){
  $(this).animate({width:"150px",},300);
  $("i.fa-search").css({"opacity":"1",});
});
$("#search").blur(function(){
  $(this).animate({width:"80px",},300);
  $("i.fa-search").css({"opacity":"0.5",});
});

二、在URL中增加跳转

url(r'^search/$',views.search,name='search'),

三、在views中增加处理方法

def search(request):
    str=request.GET['search']
    post_list = Post.objects.filter(Q(title__icontains=str,status='p')|Q(body__contains=str,status='p'))
    data = {}
    pages, post_list = getPages(request,post_list)

    data['post_list'] = post_list
    data['pages'] = pages
    data['search']=str

    if WHICHTEMPLATE :
        return render(request, 'blog/index.html', data )
    else:
        return render(request, 'blog/index2.html', data)

本文主要难点在于设置样式。

Last Modified·2018年2月23日 16:47

summerdawn文章添加搜索

一、在模板文件base2中添加表单

二、在URL中增加跳转

三、在views中增加处理方法

评论列表