6월 7일 TIL (검색조건 창 만들기, input)
매우 많은 정보들 사이에서 검색조건을 고르고, 골랐다면 input창에 넣어지는 것 구현하기
이러한 input창 만들기.
아래에 있는 리스트들을 클릭하면,
이런식으로 input창 값에 들어가도록 하는 코드를 작성해보자.
< 부가기능 > input창에 검색 조건을 넣으면 해당되는 얘들만 보이게
<html 코드>
<div class="input_tag_title_area">
<input type="text" name="input_tag_title" class="input_tag_title" id="input_tag_title">
{% for shoe_tag in shoe_tags %}
<div class="input_tag_title_list">
<div class="input_tag_title_list_obj" id="input_tag_title_list_obj_{{shoe_tag.tag_title}}" onclick="take_tag_title('{{shoe_tag.tag_title}}')">
{{shoe_tag.tag_title}}
<hr>
</div>
</div>
{% endfor %}
</div><shoe_tags> 의 구조
<shoe_tags>는 이러한 정보들을 담고 있는 DB이다. ( 현재 서버쪽에서 클라이언트로 뿌려준 상태 )
html에서는 shoe_tags를 for문으로 하나씩 돌아서 tag_title을 하나씩 출력을 해 줄 것이다.
이러한 html에서 각 tag_title에 개별적인 id를 할당 해 주기 위해서 id값에도 같이 tag_title을 뿌려주었다.
이러한 id값은 JS에서도 사용을 해야하기에, function()의 parameter에도 담아주어 JS로 보내준다.
그러면 이제 JS 동작을 살펴 보도록 하자.
const tag_title_input = document.getElementById("input_tag_title");
function take_tag_title(tag_title){
const tag_title_id = document.getElementById("input_tag_title_list_obj_" + tag_title);
tag_title_input.value = tag_title_id.innerText;
}
>>> 여기까지 1번 설명
tag_title_input.addEventListener('input', function(){
const tag_title_class = document.querySelectorAll('.input_tag_title_list > .input_tag_title_list_obj');
var include_text = document.getElementById('input_tag_title').value;
for (let i = 0; i < tag_title_class.length; i++){
if (tag_title_class[i].innerText.includes(include_text) == false){
tag_title_class[i].style.display ='none';
}
else if (tag_title_class[i].innerText.includes(include_text) == true){
tag_title_class[i].style.display ='block';
}
}
>>> 여기까지 2번설명
1번 설명 ( input창에 내가 고른 검색엔진 넣어주기 (바로 검색이 가능 하도록))
input 칸의 ID로 tag_title_input 이라는 변수 생성
html에서 뿌려준 각각의 tag_title을 눌렀다면 take_tag_title()을 실행한다.
내가 눌러준 id는 html의 tag_title을 parameter로 받아온 id이다.
그 값을 tag_title_id에 저장
( ex) 조던 1 레트로 하이 ~~를 눌렀다면, 그 id는 'input_tag_title_list_obj_조던 1 레트로 하이~~'가된다.
그리고 input의 입력값을 방금 가져온 id값의 innerText로 채워준다.
== input창에 내가 누른 이름을 넣어줌
2번 설명
addEventListener는 input창에 무언가가 input이 될 때마다 발생한다.
input_tag_title_list 라는 class를 가진 div가
input_tag_title_list_obj라는 calss를 가진 div를 상속하기에, 부모 속성을 명시 하여 준다.
그리고 같은 class를 공유하는 모든 인자들을 QuerySelectorAll을 통하여 가져온다.
그러면 모든 값들이 List 형태로 저장이 될 것!
그러면 tag_title_class = [tag_title_class[0] ~~tag_title_class[총 개수]] 이렇게 생성이 될 것이다.
그러면 for문을 통해서 각 innerText값이 input창에 있는 값을 포함하고 있는지를 확인.
만약 포함하지 않는다면 display:None으로 보이지 않게 처리.
만약 포함한다면 display:block으로 보이게 처리