<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>
<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>