看到蓝色理想上有人问这个效果，而且刚好项目不是那么紧张，所以就简单的写了一个效果，也是基于 jQuery 的，关于具体的应用可以看下 Alibaba 中国站右上角的搜索框的效果即可，好了，废话少说，上代码，还是放到最后吧。坚持传统。什么是传统，我也不知道，额。
先是 HTML 的结构，其实这里完全不用 这么多 id 的，只是为了少输入字符，代码每个字都是键盘输入，不能怪我懒，还有，如果你有好的自动补全的文本编辑器，不妨推荐下，注意啊，是文本编辑器，言归正传，对于 id 和 class 的使用，还是适可而止，不要学我啊。当然，怎么个适可而止法，不是本文的重点，那就略过。
<div id="a">
<div id="b">
<span>O</span><span>P</span><span>Q</span><span style="display:none;" class="current new"></span>
</div>
<div id="c">
<div class="relative">R</div>
<div class="absolute">
<span>S</span><span>T</span><span>U</span><span>V</span>
</div>
</div>
</div>
#a是大框架，里面包括 #b 和 #c ，#b 是已经显示在搜索框上部的，当然最后一个 span 让其先隐藏，是为了将来将点击的项目 替换 到这里。#c 除了 .relative 显示之外，其他的例如 .absolute 都叫它隐藏，为的是鼠标移上去他才可以显示。
然后是 CSS 代码，写的不好不要嘲笑，刚入门，见谅，并且指导，或者交流。
<style>
body {
width:400px;
margin:100px auto 0 auto;
}
#a {
width:400px;
}
#b,#c {
float:left;
}
#b span, #c span,.relative {
display:block;
width:60px;
height:30px;
line-height:30px;
background:#ccc;
margin:0 5px;
text-align:center;
cursor:pointer;
}
#b span {
float:left;
}
#c span,.relative {
margin-bottom:2px;
}
.absolute {
display:none;
}
.current {
border-bottom:2px solid red;
}
</style>
这里就是让显示的显示，隐藏的隐藏，然后让两个.relative 和 .absolute 各就各位，也就是定好位子，这里叫布局，其实这个很简单，就是用了一个 float ，其他没有了。
然后是脚本，当然了，第一步还是引入 jQuery 库，这个不要我再写了吧，如果记不住，那就不用往下读了，直接到末尾拷贝代码吧，如果想记住，那就用手多输入几遍啊。
下面是 jQuery 代码，写的不好，见谅。
<script type="text/javascript">
$("#c").hover(function(){
$(".absolute").show();
},function(){
$(".absolute").hide();
});
$(".absolute>span").click(function(e){
var $target = $(e.target);
var text = $target.text();
if ($(".new").text()) {
var z = $(".new").text();
$(".new").text("");
$(".new").show().append(text);
$target.text(z);
$("span").removeClass("current");
$(".new").addClass("current");
}else {
$target.remove();
$(".new").show().append(text);
$("span").removeClass("current");
$(".new").addClass("current");
}
});
$("#b>span").click(function(e){
$("span").removeClass("current");
var $target = $(e.target);
$target.addClass("current");
})
</script>
主要是原理，代码没什么的。
先看前四行，就是数遍移上去之后，让隐藏的显示，然后鼠标移除后，让隐藏的继续隐藏，其实也就是让刚才显示的隐藏元素继续再隐他的藏。
.absolute>span， 找到 .absolute 下面的 span ，绑定单击事件 e 是参数，e.target 是 jQuery 中封装的被点击目标对象，text(); 获取被点击目标中的文字。
然后直接判断 .new 中是否有文字，有的话先把文字暂时存到 z 中，然后将这个 .new 中的文字清空，然后让他显示，并把刚才被点击对象的文字插入进去，然后再把被点击对象的文字用 z 替换下，最后将所有 span 的 current 样式删掉，再给 .new 添加 current 样式。
此处就是为什么要将那个隐藏的 span 付给 .new 和 .current 两个 class 呢，就是为了好找。最后那么样子删样式只是为了方便。
然后，又然后了，不要郁闷，我也不是很喜欢用这么多。
然后，如果 .new 中没有文字的话，那好办了，直接将被点击的对象的文字删掉，让后将其插入进 .new 中就好了，后面的删除，添加样式都一样。
最最然后，#b>span 也是找到 #b 中的 span ，当点击的时候，去掉所有 span 的 current 样式，然后再给被点击对象一个 current 样式。OK，完成了。
演示见了这里：点击看演示喽