Twitter 고급 검색이 너무 불편함

여러분 아시는 Twitter.저는 최근 유저층의 조사라던가 Twitter의 검색을 사용할 기회가 많지만 진짜로 이것 사용하기 어렵다.


사용하기 어려운 점
- 한 번 검색하지 않으면이 표시가 나오지 않습니다.
- 검색이 매번 재설정되므로 이전 검색에서 조금 바꾸는 것이 어렵습니다.
- 명령으로 검색에 넣어도 괜찮지만 그것도 꽤 귀찮다.
- 세로로 길고 사용하지 않는 항목도 표시되어 보기 어렵다

그래서 이것들을 해결할 것입니다.

만들어 갈게~

완제품

우선 완성품을 보고 싶다
htps : // Nyanko 3142592. 기주 b. 이오 /와 r 쿠 s와 m 세아 rch /

Twitter 같은 디자인으로 공식감을 냈다. Bootstrap은 위대합니다.

검색 메커니즘

Twitter의 검색은 검색의 입력을 그대로 URL에 반영하고 있을 뿐이므로, 매우 간단.
"아"라고 검색하면"htps : // 라고 해서 r. 이 m/세아 rch? q=%에3%81%82&src=tyぺd_쿠에 ry "
%E3%81%82는 "아"를 URI 인코딩하고 있을 뿐. JS는 encodeURI(string)로 간단하게 이것이 있기 때문에 만드는 것도 편하다. "아"를 넣고 싶지 않을 때는 "-아"로 -를 넣으면 그 뒤의 단어를 제외할 수 있다. 이것도 그대로 인코딩해 URL로 하고 있을 뿐이므로 간단. 자세한 검색 명령 등은 스스로 구그 해 보자.

검색 유형

키워드
- 키워드 검색
- 제외 키워드 검색
- OR 키워드 검색
- 해시태그 검색
사용자 이름
- @ 검색
- from 검색
- to 검색
Date
- since until 검색
Engagement
- 좋아요 수 검색
- RT 수 검색
- 회신 수 검색
필터
- 링크 정보
- 회신에 대해

이런 각자에 대해 검색의 URL을 보면서 JS로 좋은 느낌으로 URL을 만든다.

코드

전부 공개하고 있으므로 이쪽 봐
htps : // 기주 b. 코 m / 냥코 3142592 / 와 ぃ くる s m せ rch. 기 t

완성!

PC


스마트폰

끝

SCSS를 처음 사용했지만 매우 유용합니다.