搜索栏的宽度会在您输入时展开吗？

Question

我一直试图找到一种方法来做到这一点，但也许这是不可能的......

有没有办法可以让搜索栏扩展到里面文本内容的宽度？所以当你输入时它会变宽。然后设计明智我想中心对齐它，并将绝对定位按钮放在右边，我已经模拟了我想要解释的内容......

我猜它真的很简单明显，或者真的过于复杂！

任何想法或帮助都会很棒，谢谢！

Ps，我很乐意帮助按钮等，只是为了上下文...

Answer 1

不完美，但你可以开始使用。

使用额外的<span>屏幕外放置来获取宽度。

<span id="offscreen"></span>
#offscreen {
    position:absolute;
    top:-999em;
    left:-999em
}

JS

var $test_span = $('#offscreen')

var $input = $('input').keydown(function () {
    var val = $input.val();
    $test_span.text(val);
    $input.width($test_span.width() + 20);// add 20 for some padding
});

的 DEMO