关于智能搜索框问题
下面的代码用谷歌浏览器检查没发现问题，重新看了一遍视频核对了代码感觉没有问题了，html也用fiddler工具提交到了http://api.bing.com下了，但是就是出不来那个智能效果，大神帮帮忙，多谢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<title>Document</title>
<style type="text/css">
body{
background: #333;
}
.bg_div{
background-image: url("river.jpg");
height: 690px;
width: 1268px;
margin: 0 auto;
position: relative;
}
.logo{
background-image: url("logo.png");
height:53px;
width:107px;
float: left;
margin: -5px 18px 0 0;
}
.search-form{
float: left;
background: #fff;
padding: 5px;
/* width: 388px;*/
}
.search-text{
border: 0;
float: left;
height: 25px;line-height: 25px;
outline: none;
width: 350px;
}
.search-submit{
border: 0;
background-image: url("search-button.png");
height: 29px;
width:29px;
float: left;
}
.box{
position: absolute;
top: 200px;
left: 400px;
}
.suggest{
width: 388px;
background: #fff;
border: 1px solid #999;
}
.suggest ul{
list-style: none;
margin: 0;
padding: 0;
}
.suggest ul li{
padding: 5px;
font-size: 12px;
line-height: 25px;
cursor: pointer;
}
.suggest ul li:hover{
background: #ccc;
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<div>
<div></div>
<form action="https://cn.bing.con/search" target="_blank" id="search-form" >
<input type="text" name="q" id="search-input" autocomplete="off">
<input type="submit" value="">
</form>
</div>
</div>
<div id="search-suggest" style="display:none">
<ul id="search-result">
<li>搜索结果1</li>
<li>搜索结果2</li>
</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$("#search-input").bind('keyup',function(){
var searchText = $('#search-input').val();
$.get("http://api.bing.com/qsonhs.aspx?q="+searchText,function(d){
var d = d.AS.Results[0].Suggests;
var html = '';
for (var i = 0; i < d.length; i++) {
html+='<li>+d[i].Txt+</li>';
};
$('#search-result').html(html);
$("#search-suggest").show().css({
left:$('#search-form').offset().left,
top:$('#search-form').offset().top+$('#search-form').height()+10,
position:'absolute'
});
},'json');
})
//事件绑定
$(document).bind('click',function(){
$('#search-suggest').hide();
})
//事件代理
$(document).delegate('li','click',function(){
var keyword = $(this).text();
location.href='http://cn.bing.com/search?q='+keyword;
});
</script>
</body>
</html>
慕仰04437582回答
-
拿不到钥匙的车放不进手机的歌
我记得慕课有一个智能搜索的课程你可以看一下， 代码检索，，，恕在下直言 太麻烦了 -
慕仰0443758
meirenzhidaoma
随时随地看视频慕课网APP
Html/CSS
Html5
JavaScript