网页制作 html,js搜索中的下拉菜单是怎么出来的

Question

如题所述

Answer 1

HTML代码：
<div class="wrap">
<div class="position fl">
<a href="">合肥</a>
</div>
<div class="serch fr">
<input type="input" placeholder="请输入关键字" class="ser fl"/><input type="submit" class="submit fl" value="搜索" />
</div>
</div>
<div class="tanchu">
<div style="background:#eaeaea;overflow:auto;height:300px;">
<ul class="left">
<li class="bg">安徽<span class="fr">></span></li>
<li>北京<span class="fr">></span></li>
<li>浙江<span class="fr">></span></li>
<li>湖南<span class="fr">></span></li>
<li>湖北<span class="fr">></span></li>
<li>江苏<span class="fr">></span></li>
<li>山西<span class="fr">></span></li>
<li>广东<span class="fr">></span></li>
<li>天津<span class="fr">></span></li>
<li>云南<span class="fr">></span></li>
<li>山东<span class="fr">></span></li>
<li>福建<span class="fr">></span></li>
<li>吉林<span class="fr">></span></li>
</ul>
<ul class="right">
<li class="erji">
<ul>
<li>合肥</li>
<li>黄山</li>
<li>芜湖</li>
<li>巢湖</li>
<li>六安</li>
<li>淮南</li>
<li>合肥</li>
<li>黄山</li>
<li>芜湖</li>
<li>巢湖</li>
<li>六安</li>
<li>淮南</li>
<li>合肥</li>
<li>黄山</li>
<li>芜湖</li>
<li>巢湖</li>
<li>六安</li>
<li>淮南</li>
</ul>
</li>
<li class="erji" style="display:none;">
<ul>
<li>宣武</li>
<li>西城</li>
<li>海淀</li>
<li>朝阳</li>
<li>丰台</li>
<li>昌平</li>
</ul>
</li>
<li class="erji" style="display:none;">
<ul>
<li>杭州</li>
<li>台州</li>
<li>天台</li>
<li>绍兴</li>
<li>舟山</li>
<li>宁波</li>
</ul>
</li>
<li class="erji" style="display:none;">
<ul>
<li>宣武</li>
<li>西城</li>
<li>海淀</li>
<li>朝阳</li>
<li>丰台</li>
<li>昌平</li>
</ul>
</li>
<li class="erji" style="display:none;">
<ul>
<li>合肥</li>
<li>黄山</li>
<li>芜湖</li>
<li>巢湖</li>
<li>六安</li>
<li>淮南</li>
</ul>
</li>
<li class="erji" style="display:none;">
<ul>
<li>宣武</li>
<li>西城</li>
<li>海淀</li>
<li>朝阳</li>
<li>丰台</li>
<li>昌平</li>
</ul>
</li>
<li class="erji" style="display:none;">
<ul>
<li>杭州</li>
<li>台州</li>
<li>天台</li>
<li>绍兴</li>
<li>舟山</li>
<li>宁波</li>
</ul>
</li>
<li class="erji">
<ul>
<li>合肥</li>
<li>黄山</li>
<li>芜湖</li>
<li>巢湖</li>
<li>六安</li>
<li>淮南</li>
<li>合肥</li>
<li>黄山</li>
<li>芜湖</li>
<li>巢湖</li>
<li>六安</li>
<li>淮南</li>
<li>合肥</li>
<li>黄山</li>
<li>芜湖</li>
<li>巢湖</li>
<li>六安</li>
<li>淮南</li>
</ul>
</li>
<li class="erji" style="display:none;">
<ul>
<li>宣武</li>
<li>西城</li>
<li>海淀</li>
<li>朝阳</li>
<li>丰台</li>
<li>昌平</li>
</ul>
</li>
<li class="erji" style="display:none;">
<ul>
<li>杭州</li>
<li>台州</li>
<li>天台</li>
<li>绍兴</li>
<li>舟山</li>
<li>宁波</li>
</ul>
</li>
<li class="erji" style="display:none;">
<ul>
<li>宣武</li>
<li>西城</li>
<li>海淀</li>
<li>朝阳</li>
<li>丰台</li>
<li>昌平</li>
</ul>
</li>
<li class="erji" style="display:none;">
<ul>
<li>合肥</li>
<li>黄山</li>
<li>芜湖</li>
<li>巢湖</li>
<li>六安</li>
<li>淮南</li>
</ul>
</li>
<li class="erji" style="display:none;">
<ul>
<li>宣武</li>
<li>西城</li>
<li>海淀</li>
<li>朝阳</li>
<li>丰台</li>
<li>昌平</li>
</ul>
</li>

</ul>
</div>
</div>
JS代码：

<script>
$(function(){
$(".position") .toggle(
function(){
$(".tanchu").show();
},
function(){
$(".tanchu").hide();

});

})
</script>

Answer 2

<asp:DropDownList ID="ddlCountry" runat="server" data-placeholder="Choose a Country..."
Width="200px" class="chzn-select">
</asp:DropDownList>
<script src="<%= ResolveUrl("~/Js/Ddl_Chosen/chosen.jquery.js")%>" type="text/javascript"></script>

<script type="text/javascript">
$(".chzn-select").chosen();
</script>

Answer 3

将一个DIV的position样式设置为absolute, display样式设置为none;
文本框的onpropertychange事件中使用JS将DIV的display样式设置为block
DIV数据通过Ajax填充.
document对象的onclick事件中使用JS将DIV的display样式设置为none
简单说这就是实现原理.追问

淘宝网网页的源代码中哪一段是 你能给找一下吗？
autocomplete起的作用和我所问的一样吗？

追答

淘宝网??它的代码太多了,我可不想找.
不知道你说的autocomplete是什么,如果是指IE的自动完成,那IE列出的是你曾经输入过的内容,而像百度这样的,更像是输入法的词语联想功能.其实实现的原理是一样的,不同的是数据源.

本回答被提问者采纳