<script type="text/javascript">
    $(document).ready(function(){
        // セレクトボックスの初期値を取得
        var dataList = {};
        selectObject = $('#slct_id').children();
        for(i = 0; i < selectObject.length; i++) {
            targetObject = selectObject.eq(i);
            dataList[targetObject.val()] = targetObject.text();
        }

        // テキストエリアが変更された時の動きを登録
        $('#searchWord').bind("change keyup", function(){
            searchString = $(this).val();

            // 初期化
            $('#slct_id > option').remove();
            
            for(var key in dataList){
                text = dataList[key];
                if(searchString == '') {
                    // 全部表示
                    $('#slct_id').append($('<option>').html(text).val(key));
                }
                else{
                    // 部分一致するものを表示
                    if(text.indexOf(searchString) != -1) {
                        $('#slct_id').append($('<option>').html(text).val(key));
                    }
                }
            }
        });
    });
</script>

<form method="post" enctype="multipart/form-data">
    <input name="searchWord" type="text" id="searchWord">
    <select name="slct_id" id="slct_id">
        <option value='null'>-- none --</option>
        {html_options options=$items|truncate:20 selected=$items.id}
    </select>
</form>