Javascript CSS-输入足够字符时扩展搜索栏问题

我正在创建一个扩展的搜索栏，但问题是当在文本输入中输入足够多的字符时，这些字符就会出现在搜索按钮下面

$（'.search-submit'）。单击（函数（e）{
e、 预防默认值（）；
var searchbox=$（'.searchbox'）；
if（searchbox.hasClass（'expanded-search-box'））
{
//关闭窗体
removeClass（'expanded-search-box'）；
}
否则{
//打开表单
addClass（'expanded-search-box'）；
}
});
.form容器{
宽度：600px；
保证金：0自动；
边框：1px实心#000；
填充：33px 14px；
}
.表格容器：之后{
内容：''；
显示：块；
明确：两者皆有；
}
形式{
位置：相对位置；
浮动：对；
}
.搜索框{
排名：0；
右：0；
宽度：90px；
过渡：宽度为0.3s；
填充：10px 0px；
左侧填充：10px；
大纲：无；
}
.搜索提交{
位置：绝对位置；
宽度：110px；
排名：0；
右：0；
填充：10px 0px；
}
.扩展搜索框{
宽度：500px；
}


$（'.search-submit'）。单击（函数（e）{
e、 预防默认值（）；
var searchbox=$（'.searchbox'）；
if（searchbox.hasClass（'expanded-search-box'））
{
//关闭窗体
removeClass（'expanded-search-box'）；
}
否则{
//打开表单
addClass（'expanded-search-box'）；
}
});
.form容器{
宽度：600px；
保证金：0自动；
边框：1px实心#000；
填充：33px 14px；
}
.表格容器：之后{
内容：''；
显示：块；
明确：两者皆有；
}
形式{
位置：相对位置；
浮动：对；
}
.搜索框{
排名：0；
保证金：0；
宽度：0；
过渡：宽度为0.3s；
填充：10px0；
左侧填充：10px；
大纲：无；
}
.搜索提交{
位置：绝对位置；
宽度：110px；
排名：0；
右：0；
填充：10px 0px；
}
.扩展搜索框{
宽度：470px；
填充：10px 10px；
右边距：110px；
}

在搜索文本输入中添加
maxlength=“20”

$（'.search-submit'）。单击（函数（e）{
e、 预防默认值（）；
var searchbox=$（'.searchbox'）；
if（searchbox.hasClass（'expanded-search-box'））
{
//关闭窗体
removeClass（'expanded-search-box'）；
searchbox.removeClass（'padding'）；
searchbox.addClass（'search-width'）；
}
否则{
//打开表单
addClass（'expanded-search-box'）；
searchbox.addClass（'padding'）；
searchbox.addClass（'search-width'）；
}
});
.form容器{
宽度：600px；
保证金：0自动；
边框：1px实心#000；
填充：33px 14px；
}
.搜索宽度{
宽度：0px；
}
.表格容器：之后{
内容：''；
显示：块；
明确：两者皆有；
}
形式{
位置：相对位置；
浮动：对；
}
.搜索框{
排名：0；
右：0；
宽度：70px；
过渡：宽度为0.3s；
填充：10px 0px；
左侧填充：10px；
大纲：无；
}
.填充{
右边填充：85px；
}
.搜索提交{
位置：绝对位置；
宽度：85px；
排名：0；
右：0；
填充：10px 0px；
}
.扩展搜索框{
宽度：500px；
}
只有在展开
搜索框时，才能正确添加填充：

.expanded-search-box {
  width: 350px;
  padding-right: 150px;
}

另一个解决方案是不让提交按钮与输入重叠：


/*重置框大小*/
html{
框大小：边框框；
}
*,
*：：之前，
*：：之后{
框大小：继承；
}
/*搜索组*/
.搜索组{
宽度：100%；
最大宽度：200px；
溢出：隐藏；
边缘底部：1米；
}
.搜索组--已展开{
最大宽度：500px；
}
/*搜索输入*/
.搜索输入{
浮动：左；
宽度：75%；
填充物：5em 1em；
}
/*搜索按钮*/
.搜索按钮{
浮动：对；
宽度：25%；
填充物：5em 1em；
边界：无；
}

提交
请使用此代码。
我已经为您创建了一个JSFIDLE

<div class="form-container">
    <form action="" class="form">
        <input type="text" name="search" class="search-box" placeholder="Search...">
        <input type="submit" class="search-submit">
    </form>
</div>

 $('.search-submit').click(function (e) {
        e.preventDefault();

        var searchbox = $('.search-box');

        if(searchbox.hasClass('expanded-search-box'))
        {
            // close the form
            searchbox.removeClass('expanded-search-box');
            searchbox.removeClass('dynamic-margin');
        }

        else {
            // open the form
            searchbox.addClass('expanded-search-box');
             searchbox.addClass('dynamic-margin');
        }

    });

.form-container{
            width: 600px;
            margin: 0 auto;
            border: 1px solid #000;
            padding: 33px 14px;
        }

        .form-container:after{
            content: '';
            display: block;
            clear: both;
        }

        form{
            position: relative;
            float: right;
        }

        .search-box{
            top: 0;
            right: 0;
            width: 90px;

            transition: width 0.3s ease-out;
            padding: 10px 0px;
            padding-left: 10px;
            outline: none;
        }

        .search-submit{
            position: absolute;
            width: 110px;
            top: 0;
            right: 0;
            padding: 10px 0px;
        }

        .expanded-search-box{
            width: 400px;
        }
        .dynamic-margin{margin-right:100px;}

https://jsfiddle.net/satyaprasanna/8x99tq0h/7/


$（'.search submit'）。单击（函数（e）{
e、 预防默认值（）；
var searchbox=$（'.searchbox'）；
if（searchbox.hasClass（'expanded-search-box'））
{
//关闭窗体
removeClass（'expanded-search-box'）；
removeClass（'dynamic-margin'）；
}
否则{
//打开表单
addClass（'expanded-search-box'）；
searchbox.addClas
.expanded-search-box {
    width: 395px;
    padding: 10px;
}
.search-box {
    top: 0;
    right: 0;
    width: 0px;
    transition: width 0.3s ease-out;
    padding: 10px 0px;
    outline: none;
    margin-right: 105px;
}