如何创建像 Facebook 或 WhatsApp 这样的搜索框？（移动的）答案

【问题标题】：how can I create a search box like Facebook's or WhatsApp's? (Mobile)如何创建像 Facebook 或 WhatsApp 这样的搜索框？（移动的）
【发布时间】：2015-04-12 01:54:21
【问题描述】：

有没有办法手动做到这一点？我试图使用Ionic Framework，他们为此使用了attribute，但现在已弃用。

我指的是 Facebook/WhatsApp 的搜索框：

1 - 第一时间隐藏

2 - 如果你想看到它，你必须下拉

3 - 一旦你关注它，它就会延伸到屏幕顶部并与标题重叠

4 - 有一个 X 按钮用于删除搜索框的内容，其他按钮名为“取消”用于关闭搜索框。

很确定每个人都已经注意到了这种行为。

那么，实现它的技术是什么？

我正在使用 Angular，所以我不知道是否有办法执行指令，或者仅使用 css ？你有什么建议？

something like this

【问题讨论】：

什么搜索框.....你介意张贴链接吗？
@Federico 看看您的 Facebook Messenger 或 whatsapps 搜索框。我刚刚编辑了我的问题。对不起
@NietzscheProgrammer facebook messenger/whatsapp 搜索框在哪个平台上？尝试添加一些截图
@Shekhar 请查看我的更新和我刚刚添加的链接，并且适用于移动设备
我对它不太熟悉...抱歉。我知道如何用 Css & Js 解决它。

标签： angularjs css user-interface user-experience

【解决方案1】：

让我意识到这一切太耗时了。但如果你熟悉 css3 中的“transitions”，就不是那么难了。

这是一个“精简版”

var searchbox={
	topPos_open:0, topPos_close:-50, isOpen:false,
	open:function(){
	    var box=document.getElementById("searchbox");
	    box.style.top=this.topPos_open+"px";
        document.getElementById("searchfield").focus();
        this.isOpen=true;
	},
	close:function(){
	    var box=document.getElementById("searchbox");
	    box.style.top=this.topPos_close+"px";
	    this.isOpen=false;
	},
	pop:function(){
	    !this.isOpen?this.open():this.close();
	},
	clear:function(){
		document.getElementById("searchfield").value="";
	}
}

#searchbox{position:fixed; top:-50px; left:0px; width:100%; height:60px; background-color:rgba(135, 206, 235, 1); -webkit-transition:top 0.5s ease 0s; -moz-transition:top 0.5s ease 0s; transition:top 0.5s ease 0s;}
#searchbox input{border:0px none; margin:0px 10px 0px 10px; padding:0px; width:80%; font-size:20px;}
#searchbox #input{float:left; background-color:rgba(255, 255, 255, 1); border:1px solid #dddddd; border-radius:20px; margin:5px; padding:5px; width:70%; min-width:250px;}
#searchbox #close{float:right; padding:10px:}
#searchbox button{border:0px none; background-color:transparent; font-size:20px; cursor:pointer;}
#searchbox #dots{clear:both; text-align:center; font-size:25px; cursor:pointer;}

<div id="searchbox">
    <div id="input">
      <input type="text" id="searchfield" value="">
      <button type="button" onclick="searchbox.clear()">
        X
      </button>
    </div>
    <div id="close">
      <button type="button" onclick="searchbox.close()">
        Cancel
      </button></div>
    <div id="dots" onclick="searchbox.pop()">
      ......
    </div>
</div>


<br>
<br>
<br>
<br>
Click the dots

【讨论】：