안녕하세요. 글쓰는 개발자입니다.
제가 업무 중에 검색필터 팝업창을
만들게 되었는데
이때, 배열 형식으로 선택된 값들을
저장했습니다.
그러한 이유는 배열에 저장된 값들을
Query문으로 날려줘서
검색을 진행하기 때문인데요.
오늘은 제가 업무 중에 사용한 방법을
포스팅하고자 합니다.
목차
1. html
2. javascript
3. 전체 코드
4. 사용된 javascript 내장 function
5. 결론
1. html
예제로 연령선택을 만들었습니다.
checkbox를 활용해서 중복선택이 가능하게 만들었습니다.
<!-- 검색필터 선택 -->
<input type="checkbox" id="age10" name="age" value="10" onchange="makeFilter(this);"/>
<label for = "age10">10세</label>
<input type="checkbox" id="age20" name="age" value="20" onchange="makeFilter(this);"/>
<label for = "age20">20세</label>
<input type="checkbox" id="age30" name="age" value="30" onchange="makeFilter(this);"/>
<label for = "age30">30세</label>
<input type="checkbox" id="age40" name="age" value="40" onchange="makeFilter(this);"/>
<label for = "age40">40세</label>
<input type="checkbox" id="age50" name="age" value="50" onchange="makeFilter(this);"/>
<label for = "age50">50세</label>
<input type="checkbox" id="age60" name="age" value="60" onchange="makeFilter(this);"/>
<label for = "age60">60세</label>
<br>
필터입력값 : <input type="text" id="showFilter"/> <!--필터확인용, 기능과 무관함 -->2. javascript
(아래 코드를 참고하세요.)
ageArr이라는 필터내용을 저장하는 배열을 생성합니다.
confirmCheck를 통해, check여부를 확인하고
선택시 배열에 추가, 해제시 배열에서 삭제를 합니다.
이 과정에서 push(), splice() 함수가 사용되었습니다.
<script>
var ageArr = new Array(); //필터 내용을 저장하는 배열
var showFilterValue = document.getElementById("showFilter");//필터입력값 보여주기 위한 text
//필터 내용을 저장하는 function
function makeFilter(target){
var ageVal = target.value; //check value
var confirmCheck = target.checked; //check여부 확인
console.log("필터 선택값 : "+ageVal);
console.log("선택여부 : "+confirmCheck);
// check true
if(confirmCheck == true){
console.log("check");
ageArr.push(ageVal); // check value filter 배열에 입력
// check false
}else{
ageArr.splice(ageArr.indexOf(ageVal), 1); // check value filter 배열내용 삭제
}
showFilterValue.value = ageArr; // textBox에 필터 배열 추가
console.log("필터입력값 출력 : "+ageArr);
}
</script>3. 전체 코드
즉시 적용 및 이해를 돕기 위해 전체코드를 제공합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<title>SearchFilter</title>
</head>
<body>
<!-- 검색필터 선택 -->
<input type="checkbox" id="age10" name="age" value="10" onchange="makeFilter(this);"/>
<label for = "age10">10세</label>
<input type="checkbox" id="age20" name="age" value="20" onchange="makeFilter(this);"/>
<label for = "age20">20세</label>
<input type="checkbox" id="age30" name="age" value="30" onchange="makeFilter(this);"/>
<label for = "age30">30세</label>
<input type="checkbox" id="age40" name="age" value="40" onchange="makeFilter(this);"/>
<label for = "age40">40세</label>
<input type="checkbox" id="age50" name="age" value="50" onchange="makeFilter(this);"/>
<label for = "age50">50세</label>
<input type="checkbox" id="age60" name="age" value="60" onchange="makeFilter(this);"/>
<label for = "age60">60세</label>
<br>
필터입력값 : <input type="text" id="showFilter"/> <!--필터확인용, 기능과 무관함 -->
<script>
var ageArr = new Array(); //필터 내용을 저장하는 배열
var showFilterValue = document.getElementById("showFilter");//필터입력값 보여주기 위한 text
//필터 내용을 저장하는 function
function makeFilter(target){
var ageVal = target.value; //check value
var confirmCheck = target.checked; //check여부 확인
console.log("필터 선택값 : "+ageVal);
console.log("선택여부 : "+confirmCheck);
// check true
if(confirmCheck == true){
console.log("check");
ageArr.push(ageVal); // check value filter 배열에 입력
// check false
}else{
ageArr.splice(ageArr.indexOf(ageVal), 1); // check value filter 배열내용 삭제
}
showFilterValue.value = ageArr; // textBox에 필터 배열 추가
console.log("필터입력값 출력 : "+ageArr);
}
</script>
</body>
</html>4. 사용된 javascript 내장 function
1) value
markeFilter(this)를 통해서 선택된 객체를 불러오고
이를 target으로 받아와, target.value를 활용해 선택된 checkbox의 value를 받아옵니다.
2) checked
markeFilter(this)를 통해서 선택된 객체를 불러오고
이를 target으로 받아와, target.checked를 활용해 선택된 checkbox의 check 여부를 받아옵니다.
3) push
배열을 생성한 후 배열에 값을 입력할 때 사용하는 함수입니다.
배열명.push(입력값) 의 형태로 사용하실 수 있습니다.
4)splice
배열의 특정 요소를 삭제하는 용도로 사용됩니다.
배열명.splice(삭제하고싶은 요소의 index, 삭제하고자하는 갯수)
5) indexOf
특정값의 index를 구하는 용도로 사용됩니다.
예를들어서 ageArr = ["10", "20", "30", "40", "50", "60"]
이라면, indexOf(30)이라면, 2를 출력하게됩니다.
5. 결론
검색필터를 만들면서 배열도 생성하고 다양한 함수를 경험할 수 있었습니다.
jquery를 사용하면 간편한 측면이 많지만,
속도 측면 또는 지극히 신입의 입장에서 javascript를 이해한 후
jquery를 사용하는 것이 맞다고 생각해서
pure javascript를 사용했습니다.
혹시, jquery를 활용한 검색필터 배열 생성이 궁금하신 분은
댓글 남겨주시면 즉시 반영해서 포스팅 하겠습니다.
부족한 글 끝까지 읽어주셔서 감사합니다.
'old > Javascript' 카테고리의 다른 글
| [JQuery] .one() 함수, 이벤트 한 번만 적용(사용)하기 (2) | 2020.01.29 |
|---|---|
| [JavaScript] 회원가입, ID, 닉네임 유효성검사(Validation Check) (1) | 2020.01.22 |
| [JQuery/ajax]비동기 검색제시어 기능/검색 API 활용 (4) | 2020.01.21 |
| [Javascript] IE10, remove 함수 사용 불가 이슈 (0) | 2020.01.16 |
| [Javascript] '=='과 '===' 차이(동치비교 및 동일성) (0) | 2020.01.12 |