仿百度搜索的下拉框效果
2012-02-15 13:47
190 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>仿百度搜索的下拉框效果</title>
<style type="text/css">
#search_id{font-size:12px; color:#333333}
#search_id div{ float:left}
#search_body{ border:1px solid #999999; padding-top:0px; width:240px; }
#search_body input{ height:18px; margin-top:0px;}
#search_body #searchkey_id{ width:238px; border:0px; border-bottom:1px solid #999999;}
#result_id{ padding-top:0px; width:100%;display:none;}
#result_id table{ width:100%; }
#result_id table tr td:hover{background-color:#FF9999; cursor:pointer }
</style>
</head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
var close = true ;
$("#searchkey_id").keyup(function(){
var nkey = $.trim($(this).val()) ;
if("" == nkey || null == nkey){
$("#result_id").hide() ;
}
else {
//html 为ajax请求 返回的 字符串
var html = '<table><tr><td>1dfdfdfdf</td></tr><tr><td>12dfdfdf2</td></tr><tr> <td>121212</td></tr></table>'
$("#result_id").show() ;
$("#result_id").html(html);
$("#result_id table tr td").click(function(){
$("#searchkey_id").val($(this).html()) ;
$("#result_id").hide() ;
}).hover(
function () {
//$("#searchkey_id").blur(function(){});
//alert(123) ;
close = false ;
},
function () {
//$("#searchkey_id").blur(function(){
//$("#result_id").hide() ;
//});
//alert(312) ;
close = true ;
}
); ;
}
}).blur(function(){
if(close) {
$("#result_id").hide() ;
}
});
$("#botton_id input").click(function(){
alert(232323) ;
});
});
</script>
<body>
<div id="search_id">
<div id="search_body">
<input name="searchkey" type="text" id="searchkey_id" size="30" />
<div id="result_id">
</div>
</div>
<div id="botton_id"> <input type="button" value="搜索" /></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>仿百度搜索的下拉框效果</title>
<style type="text/css">
#search_id{font-size:12px; color:#333333}
#search_id div{ float:left}
#search_body{ border:1px solid #999999; padding-top:0px; width:240px; }
#search_body input{ height:18px; margin-top:0px;}
#search_body #searchkey_id{ width:238px; border:0px; border-bottom:1px solid #999999;}
#result_id{ padding-top:0px; width:100%;display:none;}
#result_id table{ width:100%; }
#result_id table tr td:hover{background-color:#FF9999; cursor:pointer }
</style>
</head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
var close = true ;
$("#searchkey_id").keyup(function(){
var nkey = $.trim($(this).val()) ;
if("" == nkey || null == nkey){
$("#result_id").hide() ;
}
else {
//html 为ajax请求 返回的 字符串
var html = '<table><tr><td>1dfdfdfdf</td></tr><tr><td>12dfdfdf2</td></tr><tr> <td>121212</td></tr></table>'
$("#result_id").show() ;
$("#result_id").html(html);
$("#result_id table tr td").click(function(){
$("#searchkey_id").val($(this).html()) ;
$("#result_id").hide() ;
}).hover(
function () {
//$("#searchkey_id").blur(function(){});
//alert(123) ;
close = false ;
},
function () {
//$("#searchkey_id").blur(function(){
//$("#result_id").hide() ;
//});
//alert(312) ;
close = true ;
}
); ;
}
}).blur(function(){
if(close) {
$("#result_id").hide() ;
}
});
$("#botton_id input").click(function(){
alert(232323) ;
});
});
</script>
<body>
<div id="search_id">
<div id="search_body">
<input name="searchkey" type="text" id="searchkey_id" size="30" />
<div id="result_id">
</div>
</div>
<div id="botton_id"> <input type="button" value="搜索" /></div>
</div>
</body>
</html>
相关文章推荐
- 百度“搜索设置”之基于定位下拉框或者需要点击link才显示的下拉框,二次定位与多次定位实现的实际效果区别
- JS实现输入框类似百度搜索的智能提示效果
- 下拉框模糊查询,类似于百度搜索效果
- jquery百度搜索框的搜索效果插件
- JQuery+JS实现仿百度搜索结果中关键字变色效果
- 实现效果横瓜搜索与百度搜索的较量
- 类似百度搜索提示效果(asp.net+JQ+Ajax)
- 百度搜索效果(服务器来获取数据)
- 在(ASP+MSSQL)全文本搜索中如何用正则表达式实现类似百度的显示效果?
- 类似百度搜索栏的即输即更新下拉关键字的效果
- .NET使用js制作百度搜索下拉提示效果(不是局部刷新)实现思路
- 利用autocomplete.js实现仿百度搜索效果(ajax动态获取后端[C#]数据)
- 百度搜索设置下拉框的操作
- jquery php 百度搜索框智能提示效果
- ASP.NET实现百度分类搜索的效果
- .NET中使用js实现百度搜索下拉提示效果[不是局部刷新,呜呜。。]
- Ajax+Servlet+jsp仿百度搜索效果
- jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
- 如何在百度搜索中自动显示有趣的网页动态效果
- 百度搜索效果(页面传来数据地址,由服务器去获取)