作。[/size]
[size=medium]在看了百度的js和css后自己摸索出来实现效果，还是学艺不精，没读懂百度的js，有点小bug。[/size]
<!DOCTYPE html>
<html>
<head>
<title>柳絮飞祭奠</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/htmlcharset=UTF-8">
<style type="text/css">
div input {
width: 538px
height: 38px
border: 1px solid #b8b8b8
border-bottom: 1px solid #ccc
}
.z_s_top_wrap_fix {
position: fixed
top: 0
left: 0
width: 100%
height: 70px !important
padding-top: 20px
background-color: #fff
box-shadow: 0 0 3px 3px #e6e6e6
z-index: 2
}
.z_s_wr_fix {
margin: auto
width: 641px
margin-top: 0 !important
margin-bottom: 100px
}
</style>
</head>
<body>
<div class="z_s_top_wrap" id="z_s_top_wrap">
<div style="margin:autowidth:1024pxheight: 30px">
<input id="txt_search_ipt" type="text" style="float: left"><input type="button" style="height: 42pxfloat: leftbackground-color: #388cffwidth: 103px" value="百度一下">
</div>
</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
<script type="text/javascript" src="../plugins/angular/angular.js"></script>
<script type="text/javascript" src="../plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
window.onscroll = function() {
//获取搜索框当前距离顶部位置document.getElementById("z_s_wraa").offsetTop
//获取滚动条离浏览器顶部位置window.pageYOffse
if (document.getElementByIwww.scxhdzs.com#xt_search_ipt") == undefined) {
return false
}
if ($(document).scrollTop() + 30 >= $(document).height()
- $(window).height()) {
$("body").height($("body").height() + 20)
}
if ((document.getElementByIwww.scxhdzs.com#xt_search_ipt").offsetTop - window.pageYOffset) <0) {
//2.2.添加class固定搜索框到顶部
$("#z_s_top_wrap").addClass("z_s_top_wrap_fix")
$(".z_s_wr").addClass("z_s_wr_fix")
$("body").height($("body").height() - 20)
} else {
//2.3.移除搜索框固定
$("#z_s_top_wrap").removeClass("z_s_top_wrap_fix")
$(".z_s_wr").removeClass("z_s_wr_fix")
}
}
</script>
</html>
[color=red][size=medium]实现效果[/size][/color]
1、实现该功能需依赖jquery.js，jquery.autocomplete.js，先引入这两个js包，以及jquery.autocomplete.css样式文件，如图所示。
2、该不全插件要结合input元素使用，也就是在input中进行搜索时，会达到自动提示补全的效果，在html文件中定义input元素，以下是部分代码截图，如图所示。
3、那么使用autocomplete自动补全插件，也就非常简单了，下面下介绍一下最简单的使用方法，只要把要搜索的数据放进一个数组之中即可，
var language = [
"Chinese",
"English",
"Spanish",
"Russian",
"French",
"Japanese",
"Korean",
"German"
]
然后使用
$("#end").autocomplete({
source: [
language
]
})即可，代码如图所示。
4、下面可以看一下运行结果，比方说搜索带有C字的语言，如图所示。
5、下面看一下怎么和后台数据结合起来，可以与ajax一起使用，将ajax返回的数据作为上面的数组，直接赋给autocomplete插件使用，代码如图所示。
6、下面可以看一下真是的效果，可以看到，搜索“上”字之后，可以自动查询出数据库中所有带有上字的地址，这样下拉框便做出来了，如图所示。
document.getElementById('div').html('<input type="text" />')
var oInp = document.createElement('input')
oInp.type = 'text'
document.getElementById('div').appendChild(oInp)
