[Python #19] [Django #12] 穿上CSS搜索功能

pixabay

上期只使用了HTML form来显示搜索框，只有骨架没有肉体。
今天就给这个骨架穿上CSS及简单的动态。

构想

在主页上部显示一个大搜索框，这个搜索框只限搜索texts的搜索，隐藏掉tag和title搜索。
这个搜索框需要容纳多个关键词，则需要js动态来控制负数参数。
添加一个[搜索更多]按钮，点击时显示tags，titles，texts三个搜索框。

但对一个不太懂CSS与JS的初学者来说，实现这些功能非常艰难。
所以呢～～～我就借用开源的力量，网上应该有很多开源的代码。

探索开源1

如我所料，发现网上有很多 Bootstrap 例子。
其中https://colorlib.com/wp/free-css3-html5-search-form-examples/ 的v4最合我意，都实现好了的复数搜索框。
用它可以一并解决上述1，2，就你了。

探索开源2

w3schools有例子可以解决我第三个问题了。
https://www.w3schools.com/howto/howto_js_collapsible.asp

两个开源代码来之不易，我得怎么料理它们呢？
因技术有限无法实现太复杂的UI，只能简单的实现了，上层大搜索框，下层显示‘搜索更多’按钮，点击按钮时第三行显示选项。背景颜色给我喜欢的蓝，黄，红，绿单色。OK

实现

首先在项目根目录创建一个static文件夹，在之下创建三个文件夹叫 css, images, js 并把开源代码放在其中。

此后，用django的设置来读取static文件夹。在settings.py文件设置如下。

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

검색 기능은 메인에 노출해야 하므로 base.html에 코드를 추가하자. 주의할 점은 {% load static %}로 static 파일을 읽어야 한다. 또한 <link href="{% static 'css/main.css' %}" rel="stylesheet" />로 css 파일을 읽어온다.

{% load static %}
{% load post_extras %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,800" rel="stylesheet" />
<link href="{% static 'css/main.css' %}" rel="stylesheet" />

{% spaceless %}
{% endspaceless %}

<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>D_Blog</title>
      
  </head>
  <body>
      <header>
          <nav>
              <div class="s004">
              <form action="/{{ request.path | get_account_form_url }}/search/" method="get">
                  <div class="inner-form">
                    <div class="input-field">
                      <input class="form-control" id="choices-text-preset-values" name="texts" type="text" placeholder="Type to search..." />
                        <button class="btn-search" type="submit">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                          <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
                            </svg>
                        </button>
                      </div>
                  </div>
              </form>
              </div>
              <div class="collapsible-container">
                  <button class="collapsible">Advanced search</button>
                  <div class="content">
                      <form class="adv-form" action="/{{ request.path | get_account_form_url }}/search/" method="get">
                          <input id="tags" type="text" name="tags" value="" placeholder="tags">
                          <input id="titles" type="text" name="titles" value="" placeholder="titles">
                          <input id="texts" type="text" name="texts" value="" placeholder="texts">
                          <input type="submit" value="Search">
                      </form>
                  </div>
              </div>
          </nav>
      </header>

      <script src="{% static 'js/choices.js' %}"></script>
      <script>
          var textPresetVal = new Choices('#choices-text-preset-values', {
              removeItemButton: true,
          });
          
          var coll = document.getElementsByClassName("collapsible");
          var i;
          for (i = 0; i < coll.length; i++) {
              coll[i].addEventListener("click", function() {
                  this.classList.toggle("active");
                  var content = this.nextElementSibling;
                  if (content.style.maxHeight){
                      content.style.maxHeight = null;
                  } else {
                      content.style.maxHeight = content.scrollHeight + "px";
                  }
              });
          }
      </script>
{% block content %}
{% endblock content %}
    </body>
</html>

结果

输入多个关键词 & 第三行隐藏

第三行显示

背景色太耀眼？，以后再改改吧。

[Cookie 😅]
Python 3.7.4
Django 2.2.4
steem-python 1.0.1
goorm IDE 1.3