[javascript] onkeyup 이벤를 이용 select 태그 선택하기.

input 에서 텍스트를 입력 받아 select 박스의 옵션을 선택 해야할 경우

select 태그를 하나 준비한다.

<select name="searchList">
    <option value="1">가</option>
    <option value="2">나</option>
    <option value="3">다</option>
    <option value="4">가나다</option>
    <option value="5">가나</option>
    <option value="6">aa</option>
</select>

input 태그를  하나 준비한다.

<input type="text" id="searchId_input" placeholder="아이디 검색" onkeyup="javascript:func(this.value);return false;">

위 input 태그는 입력될때마다 func 를 호출 하고 현재 입력되어진 값을 전달할 것이다.



호출될 func 함수
function func(val){
   
     //현재 입력되어진 input 태그의 값이 존재 할 경우에만 select 태그를 검사한다.
     if(val.trim().length > 0 && val != ""){
       
        //각각의 옵션태그를  검사
$("select[name=searchList] > option").each(function(idx){
                //입력된 val 문자열로 시작할 경우 셀렉트 박스에 해당 옵션 태그를 selecred
                //로 바꿔 준다.
if($(this).text().indexOf(val) == 0){

                    $(this).prop("selected", true);
            return false;
                //검색된 option 태그가 없을경우 0번째 꺼를 다시 선택 하도록 한다.
}else{

                   $("select[name=cmt_writer_seq]").find("option:eq(0)").prop("selected", true);
}
});
     //입력되어진 값이 없는 경우 첫번째 옵션태그의 상태를 selected 로 변경한다.
     }else{
$("select[name=cmt_writer_seq]").find("option:eq(0)").prop("selected", true);
     }
}


일반 적으로 위와 같이 select 박스를 검색 하는 경우는 많이 없을테지만 (보통은 li 로 리스트 뿌리고 거기서 검색한거 선택하겟지 우편번호 찾기 처럼.) , 그냥 한번 해봤다.

위코드는 한가지 문제점이 있다.

예를 들면    option 태그 리스트 에  

<option>홍길동전</option>
<option>홍길동</option>


이렇게 되어있을 경우  "홍길동"  을 입력 했을때 무조건 홍길동전 만 셀렉트가 될것이다.
포함하는것을 리스트로 뿌려줘서 선택 하게 하는 추가 로직이 있으면 좋겟지만

어차피 option 태그를 가나다 순으로 뿌리면 셀렉트 박스를 클릭 하여 바로 옆에꺼를 클릭하면 되기 때문에 처리하지 않았다. 알아서 편집해서 사용할것.