搜索输入区域自动增长-如何？

时间：2011-09-02 作者：japanworm

我已经尝试了好几个小时来设计我的搜索表单。经过一些研究，我设法把它全部完成了。我甚至使用javascript（不知道是否还有非javascript解决方案）在聚焦时突出显示了文本。不管怎样，我一直在谷歌上搜索并尝试各种各样的东西（例如，在我的风格css中“聚焦”的时候，我在玩弄宽度）——什么都不起作用。我想为我的搜索表单自动增加一个宽度，如Twenty Eleven Theme.基本上我想要的是，当你点击输入区域时，它会变得更宽一些。

我能找到的是这个plugin 它使用jquery。不过，我不知道如何实现它。使用jquery是我唯一的选择吗？我可以通过其他方法获得这种效果吗？

我真的试了很多次，搜索了几个小时，但都找不到答案，所以我很高兴你能给我任何建议：）

提前多谢！

2 个回复
最合适的回答,由SO网友:Milo 整理而成

they\'re using CSS3 transitions.

<style type="text/css">
#s {
    float: right;
    -webkit-transition-duration: 400ms;
    -webkit-transition-property: width, background;
    -webkit-transition-timing-function: ease;
    -moz-transition-duration: 400ms;
    -moz-transition-property: width, background;
    -moz-transition-timing-function: ease;
    -o-transition-duration: 400ms;
    -o-transition-property: width, background;
    -o-transition-timing-function: ease;
    width: 72px;
}
#s:focus {
    background-color: #f9f9f9;
    width: 196px;
}
</style>

<input type="text" class="field" name="s" id="s" placeholder="Search">
SO网友:Camaleo

太棒了

按如下方式编辑css：

#q {
    float: right;
    -webkit-transition-duration: 400ms;
    -webkit-transition-property: width, background;
    -webkit-transition-timing-function: ease;
    -moz-transition-duration: 400ms;
    -moz-transition-property: width, background;
    -moz-transition-timing-function: ease;
    -o-transition-duration: 400ms;
    -o-transition-property: width, background;
    -o-transition-timing-function: ease;
/* edit and add from here */
    width: 16px;
    color: transparent;
    border: none;
    background: #333333 url(/img/search.png) no-repeat;
}
#q:hover { cursor: pointer; } /* added line */
#q:focus {
    background-color: #f9f9f9;
    width: 196px;
/* edit from here */
    color: #333333;
    background-image: none;
}
并将图标url替换为您选择的图标，例如：http://glyphicons.com/ 您可以在任何地方获得相同的功能！

使用这个jQuery插件（http://andreaslagerkvist.com/jquery/live-search/#jquery-plugin-example ) 您可以添加交互式搜索：D

结束
标签： jquery   javascript   search   小码农  

相关推荐

Search Using Post ID

我希望能够在搜索框中输入帖子ID，以便在搜索结果中返回准确的帖子。我还想保留搜索帖子/页面标题和内容的能力。例如，用户在搜索框中输入“#123”，搜索结果仅返回post 123。然而，如果我在搜索框中输入“123”，它将返回任何内容或标题中包含“123”的帖子/页面。This article 解释如何在管理中实现我所追求的目标-我只需要前端的同等功能！非常感谢您的帮助，谢谢。