SELECTBOX MULTIPLE 검색하기

select box 에 여러 항목이 있을때 해당 검색을 해주는 걸 만들어 보았다. 예제 소스를 나름데로 잘 만들어 놓은거 같으니, 알아서 잘 참조해보기 바란다.

<input type="text" name="k1" id="k1">
<input type="button" name="b1" id="b1" value="다중검색">
<input type="button" name="b2" id="b2" value="단일검색"><br>
<select multiple name="s1" id="s1" style="height:150px;width:150px;"></select>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
 for( var i = 10000; i<=12345; i++) $('#s1').append("<option value='"+i+"'>"+i+"</optoin>"); //selectbox에 임의의 순차적인 숫자 부여
 
 $('#b1').click( function(){ //다중검색

  if( !$('#k1').val() )
  {
   alert( "검색어를 입력해주세요.");
   $('#k1').focus();
   return false;
  }
  else
  {
   var s_item = $('#k1').val();
  }

  var scroll_height = $('#s1').prop('scrollHeight'); // 셀렉트박스의 스크롤 길이
  var this_count = $('#s1 option').size(); // 셀렉트박스의 count
  var this_height = scroll_height/this_count;
  var i = 0;

  $('#s1 option').each( function(){
   if( $(this).val().toLowerCase().indexOf( s_item.toLowerCase() ) >= 0 && $(this).attr('selected') != 'selected' )
   {
    var tst = Math.round(this_height*i); //이동될 스크롤 계산
    $(this).attr("selected", "selected");
    $('#s1').scrollTop( tst );
    return false;
   }
   i++;
  });
 });

 $('#b2').click( function(){ // 단일검색

  if( !$('#k1').val() )
  {
   alert( "검색어를 입력해주세요.");
   $('#k1').focus();
   return false;
  }
  else
  {
   var s_item = $('#k1').val();
  }

  var scroll_height = $('#s1').prop('scrollHeight'); // 셀렉트박스의 스크롤 길이
  var this_count = $('#s1 option').size(); // 셀렉트박스의 count
  var this_height = scroll_height/this_count;
  var i = 0;

  $('#s1 option').each( function(){ $('#s1').removeAttr('selected'); }); // 셀렉트 된것 해제

  $('#s1 option').each( function(){
   if( $(this).val().toLowerCase().indexOf( s_item.toLowerCase() ) >= 0 )
   {
    var tst = Math.round(this_height*i);
    $(this).attr("selected", "selected");
    $('#s1').scrollTop( tst );
    return false;
   }
   i++;
  });
 });

});
</script>

간단히 구조를 설명해 주자면...
다중검색일 경우에는 검색 내용이 value로 들어간 option을 찾아서 selected를 먹여주고, 다음 버튼을 누를때는 selected된 것들은 제외 시키고 다음걸 찾는다.
단일검색일 경우에는 검색내용이 value로 들어간 최상단의 1개의 내용만 찾는다.

뭐 이정도 해놨으니, 응용같은건 알아서 해보기 바란다. ㅡ/.ㅡ

//------------- 추가 2014.11.26

<script>
var after_i = -1;
var search_val = '';

$(function(){
 for( var i = 10000; i<=10022; i++) $('#s1').append("<option value='"+i+"'>"+i+"</optoin>"); 
 
 $('#b1').click( function(){

  if( !$('#k1').val() )
  {
   alert( "검색어를 입력해주세요.");
   $('#k1').focus();
   return false;
  }
  else
  {
   var s_item = $('#k1').val();
  }

  if( s_item != search_val )
  {
   after_i = -1;
   search_val = s_item;
  }

  var scroll_height = $('#s1').prop('scrollHeight'); // 셀렉트박스의 스크롤 길이
  var this_count = $('#s1 option').size(); // 셀렉트박스의 count
  var this_height = scroll_height/this_count;
  var i = 0;

  $('#s1 option').each( function(){ $(this).removeAttr('selected'); }); // 셀렉트 된것 해제

  $('#s1 option').each( function(){
   if( $(this).val().toLowerCase().indexOf( s_item.toLowerCase() ) >= 0 && i>after_i)
   {
    var tst = Math.round(this_height*i);
    after_i = i;
    $(this).attr("selected", "selected");
    $('#s1').scrollTop( tst );
    return false;
   }
   if( after_i == i ) after_i = -1;
   i++;
  });
 });

});
</script>

위의 다중 검색을 조금 수정한 버전이다. 해당 소스는 다중 검색한 것들을 검색버튼을 누를시에 차례대로 다음 걸로 찾아가 주는 소스이다.