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

hive-105017 · @june0620 · Sep 15 '20

$3.10

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

pixabay
https://cdn.pixabay.com/photo/2019/03/12/20/27/kanban-4051777_1280.jpg
***

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

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

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

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

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

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

#### 实现
首先在项目根目录创建一个static文件夹，在之下创建三个文件夹叫 css, images, js 并把开源代码放在其中。 
![](https://cdn.steemitimages.com/DQmYci2Cf1M6XyaQqz53rkkSSKWttad9merFysHdES5BgMY/image.png)

此后，用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')
]
```
<p></p>

![](https://cdn.steemitimages.com/DQmdgHuxTVzcrmJGBUz4hCHzBXBZZMn1Hjdo9uzhv8PxTpL/image.png)


검색 기능은 메인에 노출해야 하므로 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>

```

#### 结果 

**输入多个关键词 & 第三行隐藏**
![](https://cdn.steemitimages.com/DQmdoT1qkephkiGq81yoaSHeWLcGDGwgcX49yLPwqdQciRt/image.png)

**第三行显示**
![](https://cdn.steemitimages.com/DQmWpHyEX9GfbMmJCcytWyh9tn6xompMQZCu7b151kZHSCz/image.png)

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

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

👍 tipu, magicmonk, centering, julialee66, cnbuddy, ctime, june0620, wherein, minigame, riosparada, cnstm, parkname, team, payroll, gghite, cnbuddy-reward, lupafilotaxia, forecasteem, dudream, bert0, kryptogames, slowwalker, realprince, happy-soul, shenchensucc, andyhsia, bluengel, mangou007, andrewma, jancharlest, bartheek, steemfriends, steem-agora, cesaramos, udabeu, oldstone, melaniewang, lucky2015, changxiu, tina3721, coder-bts, nokodemion, dappstats, leslierevales, tokenindustry, meins0815, mein2070, donekim, moneytron, mawit07, flamingirl, minloulou, bcm, logicforce, real3earch, roseofmylife, cpt-sparrow, cryptogambit, jacuzzi, jsj1215, troll3838, memeteca, starrouge, lianjingmedia, and 17 others
👎 naha

`author`	june0620
`permlink`	python-19-django-12-css
`category`	hive-105017
`json_metadata`	{"app":"peakd/2020.09.4","format":"markdown","tags":["cn","dev","dblog","whalepower","palnet","python","django","goorm"],"links":["https://colorlib.com/wp/free-css3-html5-search-form-examples/","https://www.w3schools.com/howto/howto_js_collapsible.asp"],"image":["https://cdn.pixabay.com/photo/2019/03/12/20/27/kanban-4051777_1280.jpg","https://cdn.steemitimages.com/DQmQukh3k1T2ungVeFwqvT1WecURkGGVmkzZQdsbFwpZGAn/image.png","https://cdn.steemitimages.com/DQmYci2Cf1M6XyaQqz53rkkSSKWttad9merFysHdES5BgMY/image.png","https://cdn.steemitimages.com/DQmdgHuxTVzcrmJGBUz4hCHzBXBZZMn1Hjdo9uzhv8PxTpL/image.png","https://cdn.steemitimages.com/DQmdoT1qkephkiGq81yoaSHeWLcGDGwgcX49yLPwqdQciRt/image.png","https://cdn.steemitimages.com/DQmWpHyEX9GfbMmJCcytWyh9tn6xompMQZCu7b151kZHSCz/image.png"]}
`created`	2020-09-15 12:14:48
`last_update`	2020-09-15 12:14:48
`depth`	0
`children`	4
`last_payout`	2020-09-22 12:14:48
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	1.628 HBD
`curator_payout_value`	1.467 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	5,103
`author_reputation`	118,592,211,436,406
`root_title`	"[Python #19] [Django #12] 穿上CSS搜索功能"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	0
`post_id`	99,639,532
`net_rshares`	12,256,845,672,666
`author_curate_reward`	""

properties (23)vote details (82)

voter	rshares	pct
team	147,292,458,799	20%
mangou007	13,087,067,545	8.07%
slowwalker	35,131,735,762	50%
magicmonk	2,292,870,110,541	100%
riosparada	291,195,155,912	100%
bert0	42,601,376,575	8.07%
tumutanzi	926,146,203	50%
oldstone	9,641,236,700	50%
coldhair	892,445,338	50%
centering	1,442,311,799,556	100%
shenchensucc	16,823,541,733	30%
tipu	2,597,168,712,854	8%
june0620	551,654,963,938	100%
mawit07	2,254,883,570	50%
minloulou	1,972,153,221	10%
flamingirl	2,117,705,629	8.07%
lindalex	580,349,302	50%
cnbuddy	936,705,441,891	100%
nokodemion	4,045,610,589	100%
dudream	57,945,901,145	100%
bartheek	11,389,984,224	4%
suhunter	961,902,227	50%
leslierevales	3,138,988,885	50%
udabeu	9,964,645,861	30%
jsj1215	1,238,642,795	100%
happy-soul	16,917,328,247	4%
realprince	22,362,474,000	100%
donekim	2,680,332,526	100%
naha	-19,696,462,937	-50%
lucky2015	5,183,053,036	100%
gghite	75,026,899,070	100%
parkname	236,933,474,346	100%
payroll	87,520,376,990	2%
julialee66	1,120,025,415,335	8.5%
andrewma	11,444,505,055	50%
cesaramos	11,085,087,095	84%
jancharlest	11,443,152,837	8%
wisdomandjustice	569,097,806	50%
meins0815	2,842,969,211	23%
crimo	640,357,298	11.5%
ravenkim	304,940,011	100%
longer	951,611,566	2%
coder-bts	4,572,315,034	50%
daath	263,180,908	100%
veronicalee	310,649,001	50%
melaniewang	8,197,466,827	50%
lupafilotaxia	62,611,024,071	50%
changxiu	5,053,333,843	50%
bluengel	13,430,233,957	100%
laissez-faire	84,153,335	100%
memeteca	1,042,365,132	8.07%
forecasteem	58,137,331,537	100%
skoroklad	701,304,557	100%
dam4ik2	705,609,365	100%
moneytron	2,542,306,579	100%
starrouge	1,029,779,666	50%
wherein	447,963,913,891	100%
steemfriends	11,257,285,614	100%
zerofive	938,863,878	50%
jacuzzi	1,409,883,928	4%
cnstm	283,595,549,036	100%
ctime	790,704,353,979	5%
lianjingmedia	1,004,005,509	100%
cpt-sparrow	1,579,826,505	100%
kryptogames	37,314,710,932	8%
tina3721	4,865,573,237	50%
andyhsia	16,007,239,982	100%
minigame	336,310,477,488	100%
cryptogambit	1,444,869,138	7.5%
oldstone.sct	493,599,987	50%
tokenindustry	2,982,045,239	80%
bcm	1,882,496,817	6%
hongdangmu	551,086,303	8.5%
mein2070	2,723,508,687	75%
dappstats	3,629,188,573	15%
cnbuddy-reward	73,536,534,654	100%
roseofmylife	1,833,061,267	50%
real3earch	1,844,433,146	100%
steem-agora	11,092,513,017	50%
toni.pal	0	0.62%
troll3838	1,184,039,360	100%
logicforce	1,867,986,400	50%

`author`	annepink
`permlink`	qgq1hu
`category`	hive-105017
`json_metadata`	{"users":["tipu"],"app":"hiveblog/0.1"}
`created`	2020-09-15 22:37:09
`last_update`	2020-09-15 22:37:09
`depth`	1
`children`	3
`last_payout`	2020-09-22 22:37:09
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	12
`author_reputation`	1,030,887,736,784,770
`root_title`	"[Python #19] [Django #12] 穿上CSS搜索功能"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	99,649,021
`net_rshares`	0